背景图延迟加载(lazyload)技术
图片延迟加载技术目前已经被各种网站广泛的使用，但最近的一篇《PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术。为什么要使用背景图延迟加载技术？下面我们就来说一说这个问题。
之所以使用图片延迟加载技术，是为了避免浪费带宽。有些页面上嵌入了很多图片(上面所说的《PS美女试验的惊人结果 》里就嵌入了30多张高清美女图)，但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时，正常情况下，这30多种图片会全部一次性从服务器加载到客户端，就造成的服务器的压力，也给用户的浏览器造成压力，而且，也许用户之看了前几张图片就退出去了，那其它图片的加载就是浪费。
而使用图片延迟加载技术时，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。
目前最流行的图片延迟加载技术是使用Lazy Load Plugin for jQuery，它是一个非常轻量级的jQuery插件，只有2k多的体积。使用方法也非常简单，只需要在图片上这样写：
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
然后用一段js
$(function() {
$("img.lazy").lazyload();
});
这样，这个图片就会只有当需要加载时才会加载。
大多数人使用Lazy Load Plugin for jQuery，是用于image加载，但其实它还有一个很重要的功能，就是背景图延迟加载。背景图延迟加载的用法和图片延时加载的用法很相似，首先，你需要使用背景的元素需要这样写：
<div class="lazy" data-original="img/example.jpg" width="640" height="480"></div>
然后用一段js
$(function() {
$("div.lazy").lazyload();
});
这样，只有当这个div出现在可视视窗内时，背景图才会加载显示。
使用背景图延时加载有什么好处？
首先上面已经说了，可以避免不必要的资源浪费，页面下部可视视窗外的很多元素也许用户根本不会去查看，所以它们的背景图也不必加载，只有当用户看到它们时，才去加载。
第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站，它们不管遇到什么资源都会抓取回去，页面上的图片它们最感兴趣，往往图片是最占流量的。如果将图片换成背景图，这些爬虫就无法识别，抓取不到这些图片，减少了服务器的压力。
你觉得如何？有没有打算在你的页面上也使用背景图延迟加载技术？感兴趣的程序员可以看看《PS美女试验的惊人结果 》这个页面上的背景图延迟加载的效果。
PS美女试验的惊人结果
个人觉得，延迟加载对于用户界面来说，其实并不友好，最好是后台预加载图片，等到用户滚动到对应位置后立刻展示，使用这个ｌａｚｙ ｌｏａｄ如果加载大图片，经常会看到图片破碎加载，影响用户体验
肯定要做预加载的啊!比滚屏稍高100px的像素开始加载.即在进入滚屏下方不可见区域100px内就触发加载.
虽然是省了服务器的流量了，不过对于一部分用户来说，用户体验就相当糟糕了。
比如我看一个文章标题不错，点了在后台页面打开，我就等它全部下载完了我在去看的，结果现在，我看的时候，发现图片全都看不到，还需要不断的加载，相当于占用我的时间了。
就拿你举例的那个文章来说，我看到的全是粉色的色块了。而且我只有慢慢的滚动才能看到图片，如果我阅读速度快，下载完毕是不可能的。
这个也是为什么这种延迟加载的技术在火了一阵以后又慢慢的被大家弃用的原因。
工作中涉及的一个东西用到了这个 lazyload 库，由于在页面滚动时进行检测并加载未加载的图片，而鼠标滚动一次可能会触发N多次滚动事件，结果导致在旧浏览器和配置较低的机器上有明显的性能问题。尝试对这个进行改进，分享下我的解决方法，是在原有的事件处理函数外包装一下：
function wait(handler, delay) {
delay = delay || 200;
var timer;
return function () {
var self = this,
args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
handler.apply(self, args);
timer = null;
}, delay);
};
}
楼上几位大虾分析的都很不错,都有些道理. 也许应用这些技术的同时破费更多Money,提高带宽性能才算是问题的终极硬解.