网站首页技术博客

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

洞天水月2021-03-12 14:33:302623人次阅读
摘要做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都可以有很好的兼容

文章评论