jquery – 如何控制Nivoslider如何预加载图像?

前端之家收集整理的这篇文章主要介绍了jquery – 如何控制Nivoslider如何预加载图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用优秀的Nivoslider插件,在我的主页上显示一组照片,目前为5.​​所有都正常,但每张照片增加了大约150K的页面重量。我实际上想要展示大约10个“幻灯片”,但是由于所有这些图像都是在页面开头预载的,所以页面重量很快就会变得太大,尤其是因为很多用户可能不会等待“显示”完成。

我想知道是否有可能不预加载图像,或更好,只有x图像在前面。我在文档中找不到任何东西,所以我认为它不是本地支持的。有任何想法吗?

解决方法

我一直在寻找类似的解决方案。我在网站上有一个图像库,使用幻灯片插件在主页上加载了十几个高质量的图像。并且所有这些图像都被加载到页面重量上增加2-3页。没有骰子。

Nivo离开图像处理直到浏览器。它读取< img src =“...”>标签,然后将图像加入到具有光滑过渡效果幻灯片中。代码中没有什么可以控制图像的加载或预加载

幸运的是Nivo在Github上。所以我分叉支持延迟加载图像:

@L_502_0@

用法是一样的。对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 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

猜你在找的jQuery相关文章