标签:
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。这里用的插件Lazy Load
这里提供教程网站:http://code.ciaoca.com/jquery/lazyload/
这里只需要引入 jquery-1.11.1.min.js和jquery.lazyload.min.js
注意 :将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器,添加width 和height属性有助于在图片未加载时沾满所需的空间。
这样就可以实现了,是不是很easy。哈哈
<html><head> <meta charset="utf-8"> <title>图片延迟加载 </title> </head> <body> <div class="example content"> <img width="765" height="574" alt="BMW M1 Hood" data-original="img/bmw_m1_hood.jpg" src="img/bmw_m1_hood.jpg" style="display: block;"> <img width="765" height="574" alt="BMW M1 Side" data-original="img/bmw_m1_side.jpg" src="img/bmw_m1_side.jpg" style="display: block;"> <img width="765" height="574" alt="Viper 1" data-original="img/viper_1.jpg" src="img/grey.gif"><br> <img width="765" height="574" alt="Viper Corner" data-original="img/viper_corner.jpg" src="img/grey.gif"><br> <img width="765" height="574" alt="BMW M3 GT" data-original="img/bmw_m3_gt.jpg" src="img/grey.gif"><br> <img width="765" height="574" alt="Corvette Pitstop" data-original="img/corvette_pitstop.jpg" src="img/grey.gif"><br> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script> $(function(){ $(‘img‘).lazyload({ effect:‘fadeIn‘, //event: ‘scrollstop‘, appear:function(elements_left, settings) { console.log(‘appear‘); console.log(elements_left); //console.log(this, elements_left, settings); }, load:function(elements_left, settings) { console.log(‘load‘); console.log(elements_left); //console.log(this, elements_left, settings); } }); }); </script> </body> </html>
标签:
原文地址:http://www.cnblogs.com/zhangrenjie/p/4977510.html