背景图延迟加载(lazyload)技术 background-image bg background 有大用

图片延迟加载技术目前已经被各种网站广泛的使用，但最近的一篇《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美女试验的惊人结果 》这个页面上的背景图延迟加载的效果。

来自  https://blog.csdn.net/kakaka2011/article/details/46463623