<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">做WEB时有这样的需求,由于页面图片太多导致页面加载压力比较大, 这时需要通过技术手段实现图片的分时异步加载</span>
这里是通过前段js的技术来实现的,用到的一个js库文件就是jquery.lazyload.js
可以点此下载
http://andy.zzsmsc.com/tpl/Wap/default/common/js/jquery.lazyload.js
http://s.404.cn/tpl/static/dishout/js/jquery1.8.3.js
使用方法
1、引入上边两个库文件,切记先引入jquery包
<script type="text/javascript" src="http://s.404.cn/tpl/static/dishout/js/jquery1.8.3.js"></script>
<script type="text/javascript" src="/tpl/Wap/default/common/js/jquery.lazyload.js"></script>
2、图片的插入
<img class='lazy' src="" url="563080e883151.jpg" alt="" data-original="563080e883151.jpg" width="58" height="39">
定义类名,url、data-original属性,属性值为要引入的目标图片,src留空
3、延时加载的实现
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
以上三部就可实现图片的异步加载,页面滑动到什么地方图片就加载到哪,根据显示区域加载图片,无论是在PCweb还是移动web都可以有很好的兼容