网站首页技术博客
实现页面图片的延时异步加载
摘要做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、延时加载的实现
以上三部就可实现图片的异步加载,页面滑动到什么地方图片就加载到哪,根据显示区域加载图片,无论是在PCweb还是移动web都可以有很好的兼容