上一篇
下一篇
图片延迟加载插件 or 修改版（jQuery lazyLoad）
作者:刚子 日期:2008-11-16
jQuery lazyLoad这款插件还是比较多人使用的，主要功能是实现延迟加载图片，就是说当用户打开网站时只加载第一屏的图片，当用户下拉滚动条之后下面的图片会马上开始加载。
但是这个插件在一些高手中是有些争议的，有些人觉得原版插件虽然表面效果实现了，但是其实并没有帮我们减少资源的加载，所以做了改进版。我自己不是高手，所以也只能研究别人的代码来学习了。
说下我个人感觉原版和改进版的区别，原版使用方便，不需要更改网页原有代码，只需要在任意位置调用JS即可。但是改进版需要把你要加载的每个图片的src属性改变，增加一个新的属性，优点是这样会比原版减少用户加载资源数，缺点就是需要改动代码。我个人认为在方便的情况下尽量使用改进版，下面我整理了两个版本的文件请自己选择。
代码中的几个JS文件和一个图片文件尽量下载到本地再调用，因为我的服务器文件随时可以会删除，另外就是代码中的图片文件是用户在加载完成之前看到的图片，默认是个非常小的透明图片，可以自己定义其他图片。
原版：
程序代码
改进版：
程序代码
改进版需要把页面中图片代码中的src改成加载图片，然后增加original属性设置为真实图片地址，比如：
程序代码
但是这个插件在一些高手中是有些争议的，有些人觉得原版插件虽然表面效果实现了，但是其实并没有帮我们减少资源的加载，所以做了改进版。我自己不是高手，所以也只能研究别人的代码来学习了。
说下我个人感觉原版和改进版的区别，原版使用方便，不需要更改网页原有代码，只需要在任意位置调用JS即可。但是改进版需要把你要加载的每个图片的src属性改变，增加一个新的属性，优点是这样会比原版减少用户加载资源数，缺点就是需要改动代码。我个人认为在方便的情况下尽量使用改进版，下面我整理了两个版本的文件请自己选择。
代码中的几个JS文件和一个图片文件尽量下载到本地再调用，因为我的服务器文件随时可以会删除，另外就是代码中的图片文件是用户在加载完成之前看到的图片，默认是个非常小的透明图片，可以自己定义其他图片。
原版：
程序代码<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gangzi.org/web/lazyLoad/lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").lazyload({placeholder : "http://www.gangzi.org/web/lazyLoad/grey.gif",effect:"fadeIn"});
});
</script>
<script type="text/javascript" src="http://www.gangzi.org/web/lazyLoad/lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").lazyload({placeholder : "http://www.gangzi.org/web/lazyLoad/grey.gif",effect:"fadeIn"});
});
</script>
改进版：
程序代码<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gangzi.org/web/lazyLoad/lazyload_s.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").lazyload({placeholder : "http://www.gangzi.org/web/lazyLoad/grey.gif",effect:"fadeIn"});
});
</script>
<script type="text/javascript" src="http://www.gangzi.org/web/lazyLoad/lazyload_s.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").lazyload({placeholder : "http://www.gangzi.org/web/lazyLoad/grey.gif",effect:"fadeIn"});
});
</script>
改进版需要把页面中图片代码中的src改成加载图片，然后增加original属性设置为真实图片地址，比如：
程序代码<img src="http://www.gangzi.org/1.jpg">修改成<img original="http://www.gangzi.org/1.jpg" src="http://www.gangzi.org/web/lazyLoad/grey.gif">
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论