正在读取中...

广告正在读取中...

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

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

所属栏目:图片特效 时间:2013-11-27 来源:网络 作者:不详 次围观 次下载

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

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


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

请站长喝杯咖啡?

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

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

标签:
共有 条评论

给个评价吧

验证码:

正在读取中...

下载最多的

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

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

2Waterfall - jQuery瀑布流插件 流体布局

Waterfall - jQuery瀑布流插件 流体布局

3JS商品图片放大镜插件 jqzoom js

JS商品图片放大镜插件 jqzoom js

4目前最完美的IE6透明PNG背景图片解决方案

目前最完美的IE6透明PNG背景图片解决方案

5jquery hover图片滑动特效代码

jquery hover图片滑动特效代码

6jQuery图片滑动翻牌效果

jQuery图片滑动翻牌效果

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

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

8多风格jquery图片放大镜特效代码

多风格jquery图片放大镜特效代码

9css3图片变换形状特效

css3图片变换形状特效

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

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

正在读取中...

最近更新的

1jQ手风琴特效

jQ手风琴特效

2像纸一样展开的效果

像纸一样展开的效果

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

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

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

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

5css3图片变换形状特效

css3图片变换形状特效

6jquery hover图片滑动特效代码

jquery hover图片滑动特效代码

7jquery拖动图片查看代码

jquery拖动图片查看代码

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

JS网页图片延迟加载代码

9jquery带注释的交互式图片代码

jquery带注释的交互式图片代码

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

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