你的位置:首页 > Java教程

[Java教程]图片的延时加载


对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。这里用的插件Lazy Load

这里提供教程网站:http://code.ciaoca.com/jquery/lazyload/

这里只需要引入  jquery-1.11.1.min.js和jquery.lazyload.min.js

注意 :将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 添加  用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 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" src="img/bmw_m1_hood.jpg"  >    <img width="765" height="574" alt="BMW M1 Side" src="img/bmw_m1_side.jpg"  >    <img width="765" height="574" alt="Viper 1" src="img/viper_1.jpg" ><br>    <img width="765" height="574" alt="Viper Corner" src="img/viper_corner.jpg" ><br>    <img width="765" height="574" alt="BMW M3 GT" src="img/bmw_m3_gt.jpg" ><br>    <img width="765" height="574" alt="Corvette Pitstop" src="img/corvette_pitstop.jpg" ><br>  </div>   <script ></script><script ></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>

效果的话,我们可以用360浏览器保存网页图片功能进行观看