图片延【tú piàn yán】🌟迟加载🎌也称懒💒加载🎌，通常应🛶用于【yòng yú】👩图片比【tú piàn bǐ】♎较多的网页【wǎng yè】，如果一个页面😉图片比【tú piàn bǐ】♎较多，且页面【qiě yè miàn】高度或【gāo dù huò】宽度有好几屏，页面初次加载【cì jiā zǎi】🎌时【shí】🛰，只显示【zhī xiǎn shì】可视区域🐍的图片🤸，当页面滚动的时【shí】🛰候【hòu】，图片🤸进入了可视区域🐍再进行加载🎌，这样可🏆以显著【yǐ xiǎn zhe】😛的提高页面的🏀加载🎌速度，更少的【gèng shǎo de】图片🤸并发请【bìng fā qǐng】求数也可以减轻服务器的压力🦓。如果用【rú guǒ yòng】户仅仅在首屏停留，还可以节省流量【liàng】🤯。如果TAB中【zhōng】🤨的图片🤸较多，也同样【yě tóng yàng】可以应【kě yǐ yīng】🌶用于【yòng yú】👩TAB中【zhōng】🤨，当触发【dāng chù fā】TAB时【shí】🛰再进行图片🤸的加载🚆。

图片延📉迟加载的原理比较简🦍单，先将图🤩片的真🦃实地址缓存在一个自【yī gè zì】定义的【dìng yì de】属性【shǔ xìng】(lazy-src)中🎨，而⏪src地址使用一个【yòng yī gè】1×1的全透明的占位图片【wèi tú piàn】☝来代替，当然占【dāng rán zhàn】位图片【wèi tú piàn】☝也可以【yě kě yǐ】是其他的图片🐉。

1. <img src="images/placeholder.png"  lazy-src="images/realimg.jpg" /> 

因为是【yīn wéi shì】🥪使用javascript来加载【lái jiā zǎi】🈴图片🚜，如果用户禁用了javascript，可以设🦀置一个【zhì yī gè】替代的方案【fāng àn】。

1. <img src="images/placeholder.png"  lazy-src="images/realimg.jpg" alt="" /> 
2. <noscript><img src="images/realimg.jpg"  alt="" /></noscript> 

页面初次加载时获取图片在😇页面中【yè miàn zhōng】📈的位置【de wèi zhì】🤣并缓存🔞(每次取offset的值会引发页【yǐn fā yè】面的reflow)，计算出可视区【kě shì qū】🏟域，当图片🎵的位置【de wèi zhì】🤣出现在可视区【kě shì qū】🏟域中【yù zhōng】，将【jiāng】src的值替换成真实的地【shí de dì】址【zhǐ】，此时图🌀片就开始加载了【le】🌪。

当页面滚动的时候【shí hòu】，再判断🍑图片已【tú piàn yǐ】经缓存的位置🏇值是否出现在可视区【kě shì qū】📦域内，进行替😥换src加载【jiā zǎi】🏟。当所有的图片都加载【jiā zǎi】📊完之后，将相应的触发事件卸载【zǎi】，避免重🏽复操作🍽引起的【yǐn qǐ de】内存泄🕠漏。将整个窗口看【chuāng kǒu kàn】成是一个大容【gè dà róng】🍲器【qì】📆，那么也🏘可以在【kě yǐ zài】🕎页面中设置一个小容器【qì】📆，在小容【zài xiǎo róng】器中也【qì zhōng yě】🧔同样可【tóng yàng kě】以实现图片的【tú piàn de】延迟加载【jiā zǎi】🏟。

下面是【xià miàn shì】实现的【shí xiàn de】代码✅，我写成了💊jQuery插件。

1. (function( $ ) 
2. $.fn.imglazyload = function( options ){ 
3.     var o = $.extend({ 
4.                 attr        , options ), 
5.  
6.         event = o.event, 
7.         vertical = o.vertical, 
8.         container = $( o.container ), 
9.         threshold = o.threshold, 
10.         // 将【jiāng】🥔jQuery对象转【duì xiàng zhuǎn】换成【huàn chéng】🏗DOM数组便【shù zǔ biàn】于操作 
11.         elems = $.makeArray( $(this) ), 
12.         dataName = 'imglazyload_offset', 
13.         OFFSET = vertical ? 'top' : 'left', 
14.         SCROLL = vertical ? 'scrollTop' : 'scrollLeft', 
15.         winSize = vertical ? container.height() : container.width(), 
16.         scrollCoord = container[ SCROLL ](), 
17.         docSize = winSize + scrollCoord; 
18.  
19.     // 延迟加🔰载的触🍓发器 
20.     var trigger =  
21.  
22.         init , 
23.  
24.         scroll : function( coord ){ 
25.             var scrollCoord = container[ SCROLL ](); 
26.             return coord >= scrollCoord && 
27.                     coord <= ( winSize + scrollCoord + threshold ); 
28.         }, 
29.  
30.         resize : function( coord ){ 
31.       &