正在读取中...

正在读取中...

当前位置:首页 > JS代码 > 图片特效

JS图片延迟加载插件-jquery.lazyloa

所属栏目:图片特效 时间:2013-11-27 来源:网络 作者:不详 次围观 次下载
JS图片延迟加载插件-jquery.lazyloa
兼容:
查看演示
本地下载
收藏

正在读取中...

图片延迟加载,也就是当滚动条下拉显示到图片的时候才加载图片,而不需要一次性加载完网页所有图片,可以提高网页浏览速度。

jquery.lazyloa 就是一款优秀图片延迟加载代码。

使用方法

在模板标签前添加如下代码:

<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>

其中img是延迟加载所有图片,也可以根据不同模板作相应改动,比如改成#post img,这样只延迟加载#post 容器内的图片。

如:

$("#post img").lazyload({


据一流资源多测试,还可以指定多个#容器,用,隔开:

$("#post img,#banner img,#pic img").lazyload({

当然还可以绑定图片class,推荐

<img class="lazy" data-original="/skin/mb001/images/title-ico-1.png" alt="汽车保养">

JS代码:

<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>

还有几个选项可供设置

1、可以设置阀值来控制 灵敏度

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({   
placeholder : "img/loading.gif",   
event : "click"
});

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload({   
placeholder : "img/loading.gif",   
effect : "fadeIn"
});

事件触发加载,事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({   
placeholder : "img/loading.gif",   
event : "click"
});


具体效果请看演示,一流资源网推荐下载。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

正在读取中...

共有 条评论

给个评价吧

验证码: