lazyload图片延迟加载

lazyload图片延迟加载使图片在下拉滚动条时加载,一个很不错的用户体验,既减少了页面加载的时间了,也减轻了服务器的压力。

使用方法:

使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)。

1.直接导入Jquery插件
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
2.在你的页面中加入如下的javascript:

$(“img”).lazyload();

至此就将会使该网页的所有图片都延迟加载。

$("img").lazyload({
placeholder : "img/grey.gif",//通过设置占位符图片和自定事件来触发加载图片事件 
event : "click",
effect : "fadeIn" //图片显示效果 
 });

缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad

提示:可以直接使用淘宝的延迟加载技术。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

5 × 5 =

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据