如何控制Nivoslider如何预加载图像？

Question

我正在使用优秀的Nivoslider插件在我的主页上展示一组照片,目前是5.所有工作都很好,但每张照片都增加了大约150K的页面重量.我实际上想要展示大约10个"幻灯片",但由于所有这些图像都是在页面开头预先加载的,因此页面权重很快会变得太大,特别是因为许多用户可能不会等待"显示"完成.

我想知道是否有可能不预先载入图像,或者尤为明显,只有X领先的图像.我在文档中找不到任何关于它的内容,所以我认为它不是本机支持的.有任何想法吗？

Answer 1

我一直在寻找类似的解决方案.我在网站上有一个图库,使用幻灯片插件在主页上加载十几个高质量图像.并且所有这些图像都会立即加载,并为页面重量添加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>

将图像src属性更改为data-src属性:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-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