图片的延迟加载，也称为延迟加载，通常应用于图片较多的网页。如果一个页面有很多图片，页面的高度或宽度是几个屏幕，那么当页面第一次加载时，只会显示可视区域的图片。页面滚动时，图片会在进入可视区域后加载。
这样可以显著提高页面的加载速度，更少的图片并发请求也可以减轻服务器的压力。如果用户只停留在第一屏，也可以节省流量。如果TAB中有很多图片，也可以在TAB中使用，触发TAB时会加载图片。
图像延迟加载的原理比较简单。首先，图像的真实地址被缓存在一个自定义属性(lazy-src)中，src地址被一个11的完全透明的占位符图像替换。当然，占位符图像也可以是其他图像。
imgsrc='images/placeholder.png'lazy-src='images/realimg.jpg'/
因为javascript是用来加载图片的，如果用户禁用了javascript，可以设置一个替代方案。
imgsrc='images/placeholder.png'lazy-src='images/realimg.jpg'alt="'/noscriptimgsrc="images/realimg.jpg'alt=''//noscript
第一次加载页面时，获取图片在页面中的位置并缓存(每次取offset的值都会导致页面回流)，计算可见面积。当图片的位置出现在可视区域时，用真实地址替换src的值，图片就开始加载了。
当页面滚动时，判断图片的缓存位置值是否出现在可视区域，加载替换src。当所有图片加载完毕后，卸载相应的触发事件，避免重复操作导致内存泄漏。把整个窗户想象成一个大容器，
然后还可以在页面中设置一个小容器，图片的延迟加载也可以在小容器中实现。
下面是实现代码，是我作为JQuery插件写的。
(函数($){ $。fn。imglazyload=function(options){ varo=$ .extend({attr:'lazy-src 'container:window，event:'scroll 'fadeIn:false，threshold:0，vertical:true}，options)，event=o.event，vertical=o.vertical，container=$(o.container)，threshold=o.threshold，//将jQuery对象转换成数字正射影像图数组便于操作elems=$ 1000 .makeArray($(this))，dataName='imglazyload_offset 'OFFSET=vertical？'顶部''左侧，滚动=垂直？' scrollTop''scrollLeft 'winSize=vertical？集装箱。height():容器。width()，scrollCoord=container[SCROLL]()，docSize=winSize scrollCoord//延迟加载的触发器var trigger={ init:function(coord){ return coord=scroll coord coord=(docSize threshold)；}，SCROLL:function(coord){ varscroll coord=container[SCROLL]()；return coord=scroll coord coord=(winSize scroll coord threshold)；},调整大小：函数（坐标){