jQuery与lazyload.js图片延迟加载

一、简介：

　　在html中请求图片是最大的一处难题，图片的大小给我们的服务器带来了很大的压力，造成了请求时间过长、图片难以加载出来。jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。

基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。

官网：https://appelsiini.net/projects/lazyload/

帮助：http://code.ciaoca.com/jquery/lazyload/　　

　　使用方法

　　引用jquery和jquery.lazyload.js到你的页面

<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js" ></script>

　　html图片调用方法

　　为图片加入样式lazy 图片路径引用方法用data-original

<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />
<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />
<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />
<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />
<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />
<img class="img"  src="img/1.jpg" data-original='img/3.jpg'  />

　　js代码：

<script type="text/javascript" >
    $('.img').lazyload({"effect":"fadeIn"});//图片预加载
</script>

　　结果，图片最后显示出来的图片是 “data-original”里面的路径图片

　　lazyload方法的参数：

$("img.lazy").lazyload(
{placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载，在图片距离屏幕200px时提前载入
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});