您的位置:首页 > Web前端 > JQuery

图片延迟加载插件Jquery LazyLoad

2014-04-15 22:29 483 查看
基于 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

$(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.
});
})


附下载地址:

1、jquery.min.js

2、jquery.lazyload.min.js
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: