网站首页技术博客

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

洞天水月2021-03-12 14:33:30共3206人次阅读
摘要做WEB时有这样的需求，由于页面图片太多导致页面加载压力比较大， 这时需要通过技术手段实现图片的分时异步加载 这里是通过前段js的技术来实现的，用到的一个js库文件就是jQuery.lazyload.js

做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包

  

2、图片的插入

定义类名，url、data-original属性，属性值为要引入的目标图片，src留空

3、延时加载的实现

  
  $(function() {  
      $("img.lazy").lazyload({effect: "fadeIn"});  
  });  

以上三部就可实现图片的异步加载，页面滑动到什么地方图片就加载到哪，根据显示区域加载图片，无论是在PCweb还是移动web都可以有很好的兼容

上一篇：JS 存储和获取cookie​

下一篇：chrome模拟微信浏览器的user agent​

相关文章

文章评论

    猜你喜欢

    标签云

    站长推荐