JQ

jq 延迟(懒)加载lazyload.js

 
简介:
 
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。
 
优点:
 
它可以提高页面加载速度
在某些情况清晰它也可以帮助减少服务器负载
 
使用:
 
lazyload依赖与jquery。所以先引入jquery和lazyload

<script src=”jquery.js”></script>
<script src=”jquery.lazyload.js”></script>

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片(img.lazy),执行lazyload();

<img class=”lazy” data-original=”img/example.jpg” style=”margin-top:1000px” height=”200″>
<script>
$(function(){
$(“img.lazy”).lazyload();
})
</script>

注意:必须设置图片的高度或者宽度,否则插件可能无法正常工作


属性:
提前加载——Threshold

 
 
lazyload默认是当滚动到该图片位置时,加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。

$(function(){
$(“img.lazy”).lazyload({
threshold :50
});
})

上面的例子设置了滚动到距离图片50px时,图片就开始再开始加载


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

$(function(){
$(“img.lazy”).lazyload({
placeholder : “img/grey.gif”,
event : “click”
});
})

上面的例子使图片点击后,才开始加载

图片延迟加载:你可以使用这个来实现图片延迟加载,如下

$(function() {
$(“img.lazy”).lazyload({
event : “sporty”
});
});

$(window).bind(“load”, function() {
var timeout = setTimeout(function() {
$(“img.lazy”).trigger(“sporty”)
}, 5000);
});

上面的代码在页面加载完毕后五秒才开始加载图片


 

0 个评论

要回复文章请先登录注册