我正在使用优秀的Nivoslider插件，在我的主页上显示一组照片，目前为5.所有都正常，但每张照片增加了大约150K的页面重量。我实际上想要展示大约10个“幻灯片”，但是由于所有这些图像都是在页面开头预载的，所以页面重量很快就会变得太大，尤其是因为很多用户可能不会等待“显示”完成。
我想知道是否有可能不预加载图像，或更好，只有x图像在前面。我在文档中找不到任何东西，所以我认为它不是本地支持的。有任何想法吗？
解决方法
我一直在寻找类似的解决方案。我在网站上有一个图像库，使用幻灯片插件在主页上加载了十几个高质量的图像。并且所有这些图像都被加载到页面重量上增加2-3页。没有骰子。
Nivo离开图像处理直到浏览器。它读取< img src =“...”>标签，然后将图像加入到具有光滑过渡效果的幻灯片中。代码中没有什么可以控制图像的加载或预加载。
幸运的是Nivo在Github上。所以我分叉支持延迟加载图像：
https://github.com/leepowers/Nivo-Slider
用法是一样的。对HTML有一个小小的改变
<div id="slider"> <img src="my-large-image.jpg" alt=""> <img src="my-large-image2.jpg" alt=""> <img src="another-biggun.jpg" alt=""> </div>
<div id="slider"> <img src="my-large-image.jpg" alt=""> <img src="my-large-image2.jpg" alt=""> <img src="another-biggun.jpg" alt=""> </div>
由于data-src未被解析，所以在Nivo准备使用它们之前，不会加载图像。 data-src优先于src，这意味着您可以在src中为非JavaScript用户指定低分辨率版本，或者使用间隔图像填充src，以便HTML将通过验证器。
一探究竟！我在几个项目上实施。演示如下：http://powers1.net/files/nivo/demo/demo-lazy.html