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
提示:可以直接使用淘宝的延迟加载技术。