javascript - 无法让lazyload-any 工作

Question

当你向下滚动时，我试图让整个 div .lazyload 延迟加载，但我似乎无法正确加载。插件 ( https://github.com/emn178/jquery-lazyload-any )

$('.lazyload').lazyload();

<div class="lazyload">
  <div class="projectWrap">
  </div>
</div>

<div class="lazyload">
  <div class="projectWrap">
  </div>
</div>

http://jsfiddle.net/8y4fdmL0/146/

Answer 1

问题是您的 .projectWrap div 没有注释。因此，在您的 html 中，您需要将每次出现的 div.projectWrap 替换为:

<div class="projectWrap">
</div>

至

<!--
  <div class="projectWrap">
  </div>
-->

$('.lazyload').lazyload();

.projectWrap { background-color:#000; margin-bottom:300px; height:450px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>

<div class="lazyload">
  <!--
  <div class="projectWrap">
  </div>
  -->
</div>