Question

我使用的是fullpage.js，但我有20张图片要显示。如果连接速度很慢，则需要很长时间才能加载。

所以我想正常加载前四个图像，其他图像加载一个延迟加载系统。我在文档中看到运行延迟加载函数，我们必须在img标记中添加data-src。

所以我在fith图像之后有了data-src ......

<div class="slide slide0">
<img src="url-of-the-image.jpg">
</div>
<div class="slide slide1">
<img src="url-of-the-image.jpg">
</div>
<div class="slide slide2">
<img src="url-of-the-image.jpg">
</div>
<div class="slide slide3">
<img src="url-of-the-image.jpg">
</div>
<div class="slide slide4">
<img data-src="url-of-the-image.jpg">
</div>
<div class="slide slide5">
<img data-src="url-of-the-image.jpg">
</div>
<div class="slide slide6">
<img data-src="url-of-the-image.jpg">
</div>

但问题是，从第五个图像开始，每个图像在视口中时都会加载。我们有时间看图片加载......

延迟加载函数示例：https://codepen.io/alvarotrigo/pen/eNLBXo

您是否有想法在每个图像中逐个加载第五张图像之前进入视口？

提前谢谢！

Answer 1

这是延迟加载的全部要点，仅在用户即将看到它们时加载图像。在这种情况下，当我们知道用户将要在该特定部分或幻灯片中结束时，它们会加载到onLeave回调。

如果您只想在页面加载时加载它们，请不要添加data-src并正常加载它们。

如果由于某种奇怪的原因你只想延迟加载，你可以在setTimeout回调中使用afterRender，但我不明白这一点。

延迟加载和全页面jquery插件

1 个答案: