Lazy Load 延迟加载图片的jQuery插件中文使用文档

什么是LazyLoad技术?

在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担,这样势必会引起速度上质的提升。
兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面。

原文的链接在:


现在Lazy Load的版本已经是1.8.1

下载地址: https://www.jb51.net/jiaoben/63757.html

实例下载:

下载声明:
1. 注:此代码仅供学习交流,请勿用于商业用途。
2. 注:此代码仅供学习交流,请勿用于商业用途。
文件信息: 文件名: Lazy Load延迟加载图片实例
文件Hash:dd3e435124e377c2da33344d442f85d1
文件大小:1.1 MB
文件上传日期:2012 年 3 月 25 日
文件更新日期:2012 年 3 月 25 日
文件描述:在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。

怎样使用? 下面进入正题.

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

复制代码 代码如下:


<script src="https://www.jb51.net/jquery.js" type="text/javascript"></script>
<script src="https://www.jb51.net/jquery.lazyload.js" type="text/javascript"></script>



Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改<img>标签的属性。把<img>标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.
如下:

复制代码 代码如下:


<img src="https://www.jb51.net/img/grey.gif" data-original="https://www.jb51.net/img/example.jpg" heigh="480">


建议:src中的等待图片,最好使用1像素的单色图片。
JS代码如下:

复制代码 代码如下:


$("img.lazy").lazyload();


这样就能实现Lazy Load的效果了. Demo

看完Demo后,是不是觉得没什么效果出现?这个问题会在后面提到.

其实,并非一定要使用它规定的 data-original 属性来存放图片URL.你也可以自己定制别的属性名,如下:
<img src="https://www.jb51.net/img/grey.gif" data-attr="https://www.jb51.net/img/example.jpg" heigh="480">
JS代码如下:

复制代码 代码如下:


$("img.lazy").lazyload({ data_attribute : "attr" });



只需设置 data_attribute 属性为对应的名称即可. (注意:html代码大小写不敏感!所以 "data-" 后面只能跟小写字母或数字.)

对于不支持JavaScript的浏览器,应该有相应的降级处理.

可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.

复制代码 代码如下:


<img src="https://www.jb51.net/img/grey.gif" data-original="https://www.jb51.net/img/example.jpg" heigh="480">
<noscript><img src="https://www.jb51.net/img/example.jpg" heigh="480"></noscript>



CSS样式设置:

复制代码 代码如下:


.lazy {
display: none;
}



JS代码:

复制代码 代码如下:


$("img.lazy").show().lazyload();


设置图片加载的反应距离
Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.

复制代码 代码如下:


$("img.lazy").lazyload({ threshold : 200 });



另外, threshold 可以为正数或者负数.正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.
PS:图片和屏幕的距离是根据图片的 top 位置计算.
注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.

通过事件触发加载
可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjxzws.html