lazy load

最新推荐文章于 2024-05-09 09:58:29 发布

骑蚂蚁的大象

最新推荐文章于 2024-05-09 09:58:29 发布

阅读量921

点赞数

文章标签： jquery插件 function jquery 多线程服务器优化

lazy load是一款用来延迟图片加载的jQuery插件，如果网页上的图片比较多，使用这个jQuery插件就可以在一定程度上降低服务器的负载，从而达到优化网页的效果。

细心的同志可能注意到了本博首页的文章缩略图的加载效果，当用户往下拖动滚动条的时候，图片才会加载出来。正常的加载方法是在页面载入时同时加载图片的，可以说是“多线程”的加载方式吧，而lazy load的加载方式就是按需加载，效果还是挺不错的。

lazy load的使用也很简单，既然是jQuery插件，那么第一步肯定是在<head>标签中导入jQuery的库文件，然后接着导入lazy load的代码：

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

载入库文件后，就开始写jQuery的代码：

 
$(function()
 
   ('img').lazyload();
 
});

这样就可以让页面中所有的图片都延迟加载了，lazy load还有一些比较重要的参数，这里我都简单的介绍下。

图片灵敏度

 
$(function()
 
   ('img').lazyload({ threshold : 200 });
 
});

threshold是设置临界值的参数，所谓临界值就是触发位置到图片的距离，临界值的默认值为0。数值越大，你就越不能看到图片延迟加载的效果。如果比较看重用户体验，这个值应该可以好好利用。

占位图片

 
$(function()
 
   $("img").lazyload({ placeholder : "img/grey.gif" });
 
});

在图片没完全加载完的时候就显示的是图片的背景，你可以使用占位图片来填充这个背景，placeholder就是设置占位图片的路径。

事件触发

 
$(function()
 
   $("img").lazyload({
 
    placeholder : "img/grey.gif",
 
    event : "click" //设置触发事件为鼠标点击
 
   });
 
});

触发图片延迟加载的事件可以是jQuery的任意事件，比如鼠标点击(click)或鼠标悬停(hover)，还可以自定义事件。默认是等待用户拖动滚动条到使窗口到图片的位置的时候才加载。

图片加载的效果

 
$(function()
 
   $("img").lazyload({
 
    placeholder : "img/grey.gif",
 
    effect : "fadeIn"  //设置图片的加载效果为淡入
 
   });
 
});

图片在加载的时候可以设置以何种方式加载图片，默认的加载方式是jQuery的show()方法，上面的代码是设置加载效果为淡入(fadeIn)。

一般情况下，经常用到的参数就是这些了，如果你想了解更多参数设置，可以查看英文的lazy load官方说明。

lazy load的mini版下载地址。

关注