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字符,是拼不出来的。现在用所见所得编辑器的属于多数,就算是添加图片后,回到源码编辑状态下修改img属性也感觉麻烦,并且回到所见所得模式下看不到真实图片地址,有一点点影响。

思来想去,感觉还是在发布文章内容的时候,还是不去源码状态下修改img。等发布提交到服务器时,再用PHP去正则替换所有img标签的src属性并添加data-original属性以达到文章内容实现懒加载效果。但如果这样的话,数据库中保存的文章内容里的img标签就是改动后的标签了,日后要不用lazyload插件还是挺麻烦!有的童鞋也许就说,我写库的时候也不替换img属性,我读的时候再替换,但这样也会产生一个效率问题,毕竟在博客中读取数据是最频繁的,每次读取文章都用正则替换再显示,估计也不是长久之计。

看来,有得必有失!

文字链接:《jQuery图片懒加载lazyload插件的一点看法

文章地址:http://www.qttc.net/20120663.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?