实现页面图片的延时异步加载
2016-01-14 10:11
375 查看
<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都可以有很好的兼容
相关文章推荐
- Java编程思想阅读收获
- 用OpenCV做人脸识别和性别识别contrib(本文包含最全人脸库)
- SparkML实战之五:SVM
- NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9813)
- Oracle树查询(查询所有子节点,父节点等等)
- 数据库-表连接
- Poj 3278 Catch That Cow
- java160107ThreadTest
- REST技术第三步 @BeanParam的使用
- Java编程思想阅读收获
- android关于canvas.rotate()研究
- CryptoAPI简介
- Unity中私有变量如何显示在Inpsector面板中?
- iOS_25彩票_幸运转盘
- PowerDesigner使用教程
- PowerDesigner使用教程
- Js获取当前日期时间及其它操作
- 前后台中文乱码问题
- ant + svn + tomcat 全自动更新部署web程序的详解
- Hibernate 二级缓存策略如何选择