图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({ placeholder : "images/loading.gif", effect: "fadeIn" }); }); </script> <style> img a,img{border:0px;} div{ margin-bottom:10px;} </style> </head> <body> <img src="images/0.jpg" /><br /> <div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div> </body> </html>
注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作
提前加载——Threshold
lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其20px时就加载。
$(function(){ $("img.lazy").lazyload({ threshold :20 }); })
事件触发——Event
当触发定义的事件时，图片才开始加载
$(function(){ $("img.lazy").lazyload({ event : "click" }); })
你可以使用这个来实现图片的延迟加载
$(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); });
上面的代码在页面加载完毕后五秒才开始加载图片
设定效果——Effects
插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()
$("img.lazy").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.lazy").lazyload({
container: $("#container")
});
})
</script>
不顺序排列的图片
- 插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止 。
- 但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。
代码：
$("img.lazy").lazyload({
failure_limit : 10
});
处理隐藏图片——skip_invisible
为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;
注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见
$("img.lazy").lazyload({
skip_invisible : true
});
jquery.lazyload.js的说明：http://www.appelsiini.net/projects/lazyload
下载地址:原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
