如何实现背景图延迟加载

admin

图片延迟加载技术目前已经被各种网站广泛的使用，为什么要使用背景图延迟加载技术？下面我们就来说一说这个问题。

之所以使用图片延迟加载技术，是为了避免浪费带宽。有些页面上嵌入了很多图片，但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时，正常情况下，这30多种图片会全部一次性从服务器加载到客户端，就造成的服务器的压力，也给用户的浏览器造成压力，而且，也许用户之看了前几张图片就退出去了，那其它图片的加载就是浪费。

而使用图片延迟加载技术时，随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。

目前最流行的图片延迟加载技术是使用Lazy Load Plugin for jQuery，它是一个非常轻量级的jQuery插件，只有2k多的体积。使用方法也非常简单，只需要在图片上这样写：

1. <img class="lazy lazy " data-original="img/example.jpg"
   
2. width="640" height="480">

复制代码

然后用一段js

1. $(function() {
   
2.     $("img.lazy").lazyload();
   
3. });

复制代码

这样，这个图片就会只有当需要加载时才会加载。

大多数人使用Lazy Load Plugin for jQuery，是用于image加载，但其实它还有一个很重要的功能，就是背景图延迟加载。背景图延迟加载的用法和图片延时加载的用法很相似，首先，你需要使用背景的元素需要这样写：

1. <div class="lazy lazy " data-original="img/example.jpg"
   
2. width="640" height="480"></div>

复制代码

然后用一段js

1. $(function() {
   
2.     $("div.lazy").lazyload();
   
3. });

复制代码

这样，只有当这个div出现在可视视窗内时，背景图才会加载显示。


使用背景图延时加载有什么好处？


首先上面已经说了，可以避免不必要的资源浪费，页面下部可视视窗外的很多元素也许用户根本不会去查看，所以它们的背景图也不必加载，只有当用户看到它们时，才去加载。


第二个好处就是减少机器人抓取网站时给服务造成的压力。有很多网页爬虫会频繁的访问你的网站，它们不管遇到什么资源都会抓取回去，页面上的图片它们最感兴趣，往往图片是最占流量的。如果将图片换成背景图，这些爬虫就无法识别，抓取不到这些图片，减少了服务器的压力。

参数说明：


placeholder : "img/grey.gif",     //用图片提前占位
effect : "fadeIn",    //载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold : 200,    //提前开始加载
event : "click",      //事件触发时才加载,event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
failurelimit : 10,     //图片排序混乱时 ,
failurelimit,值为数字.
jquery.lazyload.zip (1.42 KB, 下载次数: 3)

2015-12-4 13:24 上传

点击文件名下载附件

为数字.