延迟加载图片也通常采用的是延迟加载，图片比较多的网页，如果网页图片较多，与页面高度或宽度的几个屏幕页面第一次加载时，只显示图片的可视区域，当网页滚动，图片为视觉区再装，所以你可以网页加载速度明显提高，减少图片的请求数也可以减轻服务器的压力。如果用户只停留在第一屏，它也可以节省流量。如果在标签有更多的图像，它也可以被应用到标签，然后将图像加载当卡被触发。

图像延迟加载原理相对简单。首先，图片的真正地址被缓存在一个定制属性（懒惰的SRC）中，而SRC地址被一个1×1完全透明的占位符映像所替代。当然，占位符图片也可以是其他图片。

复制代码代码如下所示：

因为它使用Javaｓｃｒｉｐｔ来加载图片，如果用户禁用Javaｓｃｒｉｐｔ，您可以设置另一个解决方案。

复制代码代码如下所示：


加载第一页以获取缓存中页面上的图像（每个位置和偏移量将导致页面的回流），计算可见区域，当图片位置出现在观察区域时，用以替换真实地址的SRC值，然后开始加载图片。

当页面滚动，判断图片的位置值被缓存在视觉区和替换src负荷。当所有的图片都加载，卸载相应的触发事件以避免内存泄露的重复操作造成的。以整个窗口作为一个大的容器，你也可以在页面建立了一个小的容器，还可实现延迟加载图片的小容器。

下面是实现代码，我写的是jQuery插件。

复制代码代码如下所示：
（函数（$）{）
美元。fn.imglazyload =功能（选项）{
扩展名（{
属性：'lazy-src，
容器：窗口，
事件：'scroll，
FadeIn：假，
阈值：0，
垂直：真
}，选项），

事件= o.event，
垂直= o.vertical，
集装箱= $（o.container），
o.threshold阈值=，
将jQuery对象转换为DOM数组，以方便操作。
艾丽美=美元。makearray（$（this）），
数据名= 'imglazyload_offset，
偏移量= vertical'top：右，
卷轴= vertical'scrolltop：'scrollleft，
winSize =垂直container.height（）：container.width（），
scrollcoord =容器{ }（滚动），
docsize = winSize + scrollcoord；

延迟加载触发器
var触发器{ {

初始化：函数（坐标）{
返回坐标= scrollcoord
坐标<=（docsize +阈值）；
}，

滚动：函数（坐标）{
无功scrollcoord =容器{ }（滚动）；
返回坐标= scrollcoord
（坐标<= winSize + scrollcoord +阈值）；
}，

调整：功能（坐标）{
无功scrollcoord =容器{ }（滚动），
winSize =垂直
Container.height（）（）：
Container.width（）；
返回坐标= scrollcoord
（坐标<= winSize + scrollcoord +阈值）；
}
}；

加载=功能（triggerelem，事件）{
var I＝0，
iscustom = false，
IsTrigger，坐标，元素，元素lazysrc美元；

自定义事件只要触发器可以，无需判断
如果（事件）{
如果（event'scroll'event = =！！= = 'resize）{
iscustom =真；
}
}
别的{
事件= 'init；
}

为（；；i < elems.length；i++）{
istrigger = false；
elem = elems {我}；
elem =（元）美元美元；
lazysrc = $ elem.attr（o.attr）；

如果（lazysrc elem.src | |！= lazysrc）{
继续；
}
为了从缓存中获得偏移量，缓存不仅获得计算结果，
计算值高速缓存，以避免回流引起的重复采集。
坐标= $ elem.data（数据名称）；

如果（坐标= undefined）{
坐标=美元（）{ } elem.offset偏移；
elem.data美元（数据名称，坐标）；
}

istrigger = iscustom触发事件（坐标）{ } | |；

如果（istrigger）{
加载图片
elem.src = lazysrc；
如果（o.fadein）{
elem.hide美元（）FadeIn（）；
}
删除/缓存
elem.removedata美元（数据名称）；
从DOM数组中删除DOM
elems.splice（I，1）；
}
}

加载/卸载触发事件后的所有图片
如果（！单元长度）{
如果（triggerelem）{
TriggerElem.unbind（事件、火灾）；
}
别的{
Container.unbind（o.event，火）；
}
$（窗口），Unbind（'resize，火）；
艾丽美= null；
}

}；

var火=函数（e）{
装载机（$（this），e.type）；
}；

绑定事件
集装箱=事件= 'scroll'container美元（这个）；
Container.bind（事件、火灾）；
$（窗口），Bind（'resize，火）；

初始化
Loader（）；

返回此；
}；

}（jQuery）；



呼叫：
复制代码代码如下所示：
$（'img）。Imglazyload（{
事件：'scroll，
属性：'lazy-src
}）；

默认调用可以省略所有参数。
复制代码代码如下：$（'img）。Imglazyload（）；

图片延迟加载的插件API显示：

属性的字符串
存储图片真正地址的属性的名称对应于HTML，默认的是懒惰的SRC。

容器的DOM选择器
默认容器是窗口，容器是可定制的。

事件串
事件类型触发加载的图片，默认是window.onscroll事件

渐明布尔
如果jQuery fadeIn效果是用来显示，默认为false。

阈值数
加载页面滚动到图片和指定的距离，默认值是0。

垂直布尔
如果水平滚动，默认值是真的（垂直）。

Loadｓｃｒｉｐｔ（功能的增强版）布尔
Javaｓｃｒｉｐｔ广告图像是否被加载而不阻塞，默认为false。