lazyload.js实现图片延迟加载，提高页面访问速度
发表时间： 2017-09-04 16:52:37 | 浏览次数：
lazyload.js可将图片延迟加载，提升网页的加载速度，很多长页面都有使用到。
下面举一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lazyload</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
<!-- 注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作 -->
<style>body{width:600px;margin:0 auto;text-align:center;}img.lazyload{width:600px;height:160px;margin-top:1000px;}</style>
<h1>请往下滚</h1>
<img class="lazyload" data-original="images/logo.png"/><br/>
<img class="lazyload" data-original="images/logo_x.png"/><br/>
<img class="lazyload" data-original="images/logo_r.png"/><br/>
<img class="lazyload" data-original="images/117055.jpg"/><br/>
<img class="lazyload" data-original="images/219053.jpg"/><br/>
<img class="lazyload" data-original="images/222492.jpg"/><br/>
<img class="lazyload" data-original="images/226858.jpg"/><br/>
<img class="lazyload" data-original="images/227939.jpg"/><br/>
<script type="text/javascript">
$(function(){
$("img.lazyload").lazyload();
})
</script>
</body>
</html>
Threshold——提前加载
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。
$(function(){
$("img.lazyload").lazyload({threshold:30}); //滚动到距离图片30px时，图片开始加载
})
Event——事件触发(可为jquery事件，也可以为自定义事件)当触发定义的事件时，图片才开始加载
$(function(){
$("img.lazyload").lazyload({event:"click"}); //点击图片后，才开始加载
})
//页面加载完毕后五秒才开始加载图片
$(function() {
$("img.lazyload").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazyload").trigger("sporty")
}, 5000);
});
Effects——加载效果
该插件默认的加载效果是 show() ,你可以使用任何你想要的效果。
$(function() {
$("img.lazyload").lazyload({effect:"fadeIn"});
})
Container——滚动容器内的图片
该插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载
<div style="height:600px;overflow:scroll" id="container">
<img class="lazy" data-original="img/example.jpg" alt="\" style="margin-top:1000px" height="200">
</div>
<script>
$(function(){
$("img.lazyload").lazyload({
container: $("#container")
});
})
</script>
Skip_invisible——处理隐藏图片
该插件默认不加载隐藏的图片，如果想要加载隐藏图片，需设置skip_invisible为false
注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见
$(function(){
$("img.lazyload").lazyload({skip_invisible:false});
})
上一篇：JQuery判断checkbox\radio是否选中，及选中的值
下一篇：Bootstrap模态框（Modal）的运用