jQuery图片懒加载lazyload插件的一点看法

JavaScript 2012-06-01 lazyload,jquery,懒加载,插件,img

小站建成之初,就想试试基于jQuery的图片懒加载插件Lazyload。看到别的站点实现懒加载看着很炫,虽不知道别家是否也使用的是jQueryLazyload插件,但感觉jQueryLazyload会更方便。按照jQuery的风格,以更少的代码去实现更多的功能想必Lazyload也是一样。按照网上谷狗的结果,没有找到怎么细致的介绍如何使用,差不多都是说在页面中把插件加载进来,然后执行一句JS代码即可

<script type="text/javascript" src="http://www.qttc.net/js/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$('img').lazyload();	
</script>

我于是按照网上教程,下载了插件,在尾部执行了代码。打开网页测试一下,发现没有看到效果,再多刷新几次还是一样。感觉是不是配置错了,用火狐的调试程序看了一下也页面请求。这是神马懒加载啊!压根就是没效果,图片请求还是长长的列表。

后面到网上搜索发现网上有的说法是要把图片的img中的src属性处理一下,想想也对,因为图片中src地址直接就是图片的真实地址了,那插件速度再快也来不及把所有img请求截止处理。于是我把img中的属性添加了一个data-original属性值是图片的真实地址,src属性则可以随意指向一个你预先设置好的占位图片,如loading图。

<img data-original='真实图片地址' src='占位图片' />

就如以上效果类似。然后再刷新整个页面,发现效果实现了。但没有渐变效果,于是把代码改改。

$('img').lazyload({effect:"fadeIn"});

这样就有了渐变效果。

虽然实现了效果,可感觉还是有点别扭!主要是要更改img的属性。如果页面中的html代码是数据库中取出数组然后拼装出来的还好办,直接改下拼装代码即可。但要是文章内容就麻烦了,因为文章内容存在数据库中的就是现成的HTML字符