jquery - 如何控制 Nivo Slider 预加载图像的方式？

Question

我正在使用优秀的 Nivoslider 插件在我的主页上展示一组照片，目前有 5 张。一切正常，但每张照片增加了大约 150K 的页面重量。我实际上想展示大约 10 张“幻灯片”，但由于所有这些图像都是在页面打开时预加载的，页面重量很快就会变得(太大)大，特别是因为许多用户可能不会等待“展示”完成。

我想知道是否可以不预加载图像，或者更好的是，仅在前面加载 x 个图像。我在文档中找不到任何有关它的信息，所以我认为它本身不受支持。有什么想法吗？

Answer 1

我一直在寻找类似的解决方案。我在网站上有一个图像库，使用幻灯片插件在主页上加载十几个高质量图像。所有这些图像都会立即加载，从而使页面重量增加 2-3 兆。没有骰子。

Nivo 将图像处理留给浏览器。它读取 <img src="..."> 标签，然后将图像整理成具有平滑过渡效果的幻灯片。代码中没有任何内容可以控制图像的加载或预加载。

幸运的是，Nivo 在 Github 上。所以我 fork 它来支持图像的延迟加载:

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