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


做WEB时有这样的需求,由于页面图片太多导致页面加载压力比较大, 这时需要通过技术手段实现图片的分时异步加载

这里是通过前段js的技术来实现的,用到的一个js库文件就是jQuery.lazyload.js

可以引用一下地址

http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js

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

http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

使用方法


1、引入上边两个库文件,切记先引入jquery包

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/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都可以有很好的兼容

上一篇 下一篇

评论



分享

热门文章

最新加入

最新评论

洞天水月: 只需要在ajax的访问页面加上授权就可以啦 查看原文 11月24日 10:53
Tank_O_oO/: 能否发一份源码,学习一下吗?22103507@qq.com,谢谢~ 查看原文 08月22日 10:33
1158314467_qq_com: 66666啊 查看原文 05月08日 10:59
admin: 很不错 查看原文 05月04日 17:45
admin: 很不错,谢谢分享!!!! 查看原文 05月04日 17:43