jquery.lazyload.js 是 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载,对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
使用方法:
载入 JavaScript 文件
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
修改 HTML 代码中需要延迟加载的 IMG 标签
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
调用 Lazy Load
$("#show-housedata").find("img").lazyload({effect:"fadeIn"})
或
$(function() { $("img.lazy").lazyload({ threshold:0, //灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示. failure_limit:0,//容差范围,检查是否在显示区域内. event:"scroll",//触发加载的事件. effect:"fadeIn",//加载使用的动画效果,如 show, fadeIn, slideDown 等jQuery自带的效果. effectspeed:5,//动画时间. container:$('.content'),//父容器。延迟加载父容器中的图片. data_attribute:"original", //真实图片地址的 data 属性后缀. skip_invisible:true,//跳过隐藏的图片. appear:null, //图片加载时的事件,参数:elements_left(未加载的图片数量)、settings. load:null//图片加载后的事件,参数同appear. }); })
官方网站:http://www.appelsiini.net/projects/lazyload
下载地址:
http://www.appelsiini.net/projects/lazyload/jquery.lazyload.min.js
https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js