之所以使用图片延迟加载技术，是为了避免浪费带宽。有些页面上嵌入了很多图片，但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时，正常情况下，这30多种图片会全部一次性从服务器加载到客户端，就造成的服务器的压力，也给用户的浏览器造成压力，而且，也许用户之看了前几张图片就退出去了，那其它图片的加载就是浪费。
而使用图片延迟加载技术时，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。
目前最流行的图片延迟加载技术是使用Lazy Load Plugin for jQuery，它是一个非常轻量级的jQuery插件，只有2k多的体积。使用方法也非常简单，只需要在图片上这样写：
<img class="lazy lazy " data-original="img/example.jpg" width="640" height="480">
然后用一段js
$(function() {
$("img.lazy").lazyload();
});这样，这个图片就会只有当需要加载时才会加载。
大多数人使用Lazy Load Plugin for jQuery，是用于image加载，但其实它还有一个很重要的功能，就是背景图延迟加载。背景图延迟加载的用法和图片延时加载的用法很相似，首先，你需要使用背景的元素需要这样写：
<div class="lazy lazy " data-original="img/example.jpg" width="640" height="480"></div>
然后用一段js
$(function() {
$("div.lazy").lazyload();
});这样，只有当这个div出现在可视视窗内时，背景图才会加载显示。
使用背景图延时加载有什么好处？
首先上面已经说了，可以避免不必要的资源浪费，页面下部可视视窗外的很多元素也许用户根本不会去查看，所以它们的背景图也不必加载，只有当用户看到它们时，才去加载。
第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站，它们不管遇到什么资源都会抓取回去，页面上的图片它们最感兴趣，往往图片是最占流量的。如果将图片换成背景图，这些爬虫就无法识别，抓取不到这些图片，减少了服务器的压力。