最近在优化网站的过程中接触到了图片延迟加载的一些技术，上网一搜，方法五花八门。其中用的比较多的是jQuery的一款插件——Lazy Load。关于这个插件的讨论网上也比较多，在学习实践了一段时间后，也来晒晒我的一些心得。
先简单了解下Lazy Load的用法：
下载最新版本的jquery.lazyload.js
1.在网页的<head></head>标签之间将它包含进去，由于它是依赖于jquery的，因此也必须包含jquery.js，如下两行代码：
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
2.在你的页面中加入如下的javascript：
<script type=”text/javascript”>
$(“img”).lazyload();
</script>
这将会使所有的图片都延迟加载。
现在可视区域外的图片是不会“显示”的，当页面向下滚动的时候，图片才会逐一“显示”出来。为什么要说“显示”呢？？ 慢慢往下看就知道了：）
这样我们已经实现了一个最基本的图片延迟加载，但是光这样还是不够的，在图片显示的过程中，我们经常还使用一个占位符，表示这张图片正在被加载，俗称loading。
插件本身也提供了这个配置：
顺便通过effect 参数定义一下图片的淡入效果
$(“img”).lazyload({
placeholder : “img/grey.gif”,
effect : “fadeIn”
});
这样就比较完善了。
但是实际操作的时候发现还不是那么回事：当定义了图片的width和height属性时，占位符会被拉伸，一个小小的gif动态图标会被扯得又大又模糊，真是还不如没有：（
这时候，想到一种替代的办法，去掉代码中占位符的设置（就是“placeholder : “img/grey.gif”,”这一句），将占位符直接设为img背景：
<style>
Img{background:url(img/grey.gif) 50% 50% no-repeat;}
</style>
这样，占位符显示在图片中间且不被拉伸，效果看上去还不错：）
可是，还没有结束哦，这样真的实现了延迟加载么？？网上的众多大侠们经过热烈的讨论，深入的研究，结论是这只是一种“伪延迟”技术，只不过是看上去像那么回事而已，而在大部分的浏览器中并没有根本上达到延迟加载的效果(这就是为什么我前面说是“显示”而不是“加载”的原因)。具体分析有兴趣的同学可以参考这篇jQuery插件Lazy Load Plugin的效果讨论 （http://www.lizn.net/discuss-effect-of-lazy-load-plugin-for-jquery/）
最新的解决办法来了：修改你html代码，使用占位图片作为img标签的src属性。真实的图片地址存储在data-original属性中，像这样：
<img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
还可以给需要延迟加载图片的指定特定类。通过这种方式，你可以轻松地控制延迟图片的绑定。
所有的JavaScript脚本放在页面的底部，使用方法不变。
看到这里，立马想到一个问题：在有大量图片的情况下，占位符会带来更多的资源请求，反而会增加服务器的负担：（
能不能让这些占位符只下载一次呢？？OK,再加上前面的改造，把占位符写在<style></style>标签中，作为背景，占位符只用下载一次！
