欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 图片特效

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

所属栏目:图片特效更新时间:2013-11-27原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


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

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"
});


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

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

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

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS自动给img src添加域名前缀的代码

2可全尺寸放大随意拖动查看的看图jQuery插件-Picbox

3点击图片更换图片的代码

4像纸一样展开的效果

5css3图片变换形状特效

7JS图片翻转翻页效果代码

8jquery hover图片滑动特效代码

9产品图片360度旋转展示效果代码

10jQuery鼠标悬停图片翻牌滑动切换显示代码

最新更新的

1jQuery图片放大镜效果

2jQuery图片滑动翻牌效果

3JS网页图片延迟加载代码

4css3图片变换形状特效

5jquery hover图片滑动特效代码

6点击图片更换图片的代码

7JS自动给img src添加域名前缀的代码

8像纸一样展开的效果

10jQuery鼠标悬停图片翻牌滑动切换显示代码