Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件

最近貌似都在做"阅读理解".哈~

要自己读懂文档其实不会浪费很多时间.但要通过自己的语言来表述,就需要更深的了解.

所以往往把时间花费在研究插件的代码,这样才能更多的了解作者的意图,好转变为自己的文字.

毕竟 Lazy Load 已经不是一个新的插件,所以网上也有很多的汉化文档.但前段时间Lazy Load有较大的更新.

而且Lazy Load这个插件也不大,还不够200行代码,要是肯花点时间看看,根本文档都不需要查.

但大多数人还是希望把工具拿到手就能直接使用,而不是去研究工具怎么制作出来的,所以说明书还是有存在的必要.

另外,本文还添加了一些原文中没有介绍到的属性.

原文的链接在:http://www.appelsiini.net/projects/lazyload

现在Lazy Load的版本已经是1.7.0

下载地址:   完整版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js  ,  

                    压缩版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

下面进入正题.

Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改 <img> 标签的属性.

把 <img> 标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.

如下:
[html]
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">建议:src中的等待图片,最好使用1像素的单色图片.

JS代码如下:

[javascript]
$("img.lazy").lazyload(); 
$("img.lazy").lazyload();这样就能实现Lazy Load的效果了.    Demo
看完Demo后,是不是觉得没什么效果出现?

这个问题会在后面提到.

其实,并非一定要使用它规定的 data-original 属性来存放图片URL.

你也可以自己定制别的属性名,如下:

[html]
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480"> 
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">

JS代码如下:

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

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

可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.

而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.