实现页面图片的延时异步加载

来源：互联网发布：社交网络上的跟风行为编辑：程序博客网时间：2024/06/04 22:15

<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

这个库同时需要配合jquery才可以使用

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都可以有很好的兼容

0 0