前端性能优化:实现图片延迟加载之lazyload.js插件

在这个不差钱的世界，讲性能优化是件很“多余”的事情。我们老板经常说的一句话是，开宝马的会在乎油钱吗？一台设备不行，就上两台。我当场泪奔，为什么我的工资不翻倍，你在乎这点钱吗？
很多人说这样的技巧纯属多余，但是作为程序员我们不能无所谓，如果能通过技术去将速度提高数倍乃至数十倍，这才能提现我们的价值。
回答今天的话题，作为前端工程师，我们如何进行性能优化呢？作为已经努力过的，和正在努力的，我分享下我图片延迟加载方面的经验。
lazyload.js插件的使用依赖jQuery。具体使用方式如下：

<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.lazyload.js" ></script>
<script>
    $(function() {
        $("img").lazyload({
            effect : "fadeIn"
        });
    });
</script>
<div class="lazy" data-original="img/example.jpg" width="640" height="480"></div>

这样，只有当这个div出现在可视视窗内时，背景图才会加载显示。
lazyload参数使用说明
placeholder："img/grey.gif",用图片提前占位.值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 
effect : "fadeIn", 载入使用何种效果。值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 
threshold : 200,提前开始加载。值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 
event : "click",事件触发时才加载。值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 
container: $("#container"),对某容器中的图片实现效果。值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 
failurelimit : 10,图片排序混乱时。值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
结束语总结：
要想缩短首屏加载时间，思路一般是减少http请求次数和降低每次的请求量。或者提前加载数据，提供体验。图片延迟加载有一个更大的好处是，爬虫爬取时无法爬取到图片，节省了服务器资源。

： » 前端性能优化:实现图片延迟加载之lazyload.js插件