由于 流浪天下 网站上的图片比较多，每次打开的时候都会一次全部下载再显示，图片加载比较慢。
现在好多网站都使用图片延迟加载（也称懒加载）技术，比如淘宝、迅雷等同一个页面图片比较多的网站，页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。

■ 缓载、预载的概念

最常用的图片加载有两种：

缓载：延迟加载图片或符合某些条件时才加载某些图片。
预载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。缓载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

■ 缓载的意义与实现

缓载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

主要体现在三种模式上：

第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟，如果用户在加载前就离开了页面，那么就不会加载。
第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

■ 类库

Jquery的Lazy Load用于图片缓载，Jquery的PreLoad可以用于预载。这里主要介绍在网上看到 jQuery.Lazyload.js 这个基于jQuery的图片缓载插件，原理很简单，先将图片的真实地址缓存到img的一个自定义的属性(data-url)中，而img的src地址使用一个1×1的全透明的占位图片来代替，当然占位图片也可以是其他的图片。

<img src="images/grey.gif" data-url="真实地址" />

■ Lazyload主要属性

data_attribute string
存放图片真实地址的属性名，与HTML对应，默认是lazy-src。
container dom & selector
默认的容器为window，可自定义容器。
event stirng
触发图片加载的事件类型，默认为window.onscroll事件
effect String
显示效果，默认为show（直接显示），可选fadeIn(淡入),slideDown(下拉)等
threshold number
页面滚动到离图片还有指定距离的时候就进行加载，默认是0。
（未完，点击下页继续观看）