Mikel
这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。
大概的实现方式是：
在页面的load没有触发之前，把所有的指定id的元素内的img放入到imgs中，将所有的图片的src值放入到一个新建的_src属性中，把src设置为指定的显示图片。
然后，在document.body的scroll事件触发时，循环计算imgs中的img元素位置是否正好在浏览器显示框范围内，如果是，则将img元素的_src属性的值赋给src，这样图片就能显示出来。
这里比较麻烦地方是，如何计算img的位置，获得元素的相对于页面的绝对位置。通常是用offsetLeft和offsetTop，但这两个属性是 元素的offsetParent指向的元素的相对位置， 如果offsetParent所指的元素是设置了浮动的或使用绝对定位，那么offsetLeft来获得绝对位置就不正确呢。
在这里我是将元素的所有父级元素的offsetTop之和来获得文档绝对位置的。
<span class="lit">1</span><span class="pln"> </span><span class="com">//取元素的页面绝对 X位置</span><span class="pln"> </span><span class="lit">2</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> getLeft </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="typ">El</span><span class="pun">){</span><span class="pln"> </span><span class="lit">3</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> left </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="lit">4</span><span class="pln"> </span><span class="kwd">do</span><span class="pun">{</span><span class="pln"> </span><span class="lit">5</span><span class="pln"> left </span><span class="pun">+=</span><span class="pln"> </span><span class="typ">El</span><span class="pun">.</span><span class="pln">offsetLeft</span><span class="pun">;</span><span class="pln"> </span><span class="lit">6</span><span class="pln"> </span><span class="pun">}</span><span class="kwd">while</span><span class="pun">((</span><span class="typ">El</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="typ">El</span><span class="pun">.</span><span class="pln">offsetParent</span><span class="pun">).</span><span class="pln">nodeName </span><span class="pun">!=</span><span class="pln"> </span><span class="str">'BODY'</span><span class="pun">);</span><span class="pln"> </span><span class="lit">7</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> left</span><span class="pun">;</span><span class="pln"> </span><span class="lit">8</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="lit">9</span><span class="pln"> </span><span class="com">//取元素的页面绝对 Y位置</span><span class="pln"></span><span class="lit">10</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> getTop </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="typ">El</span><span class="pun">){</span><span class="pln"></span><span class="lit">11</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> top </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"></span><span class="lit">12</span><span class="pln"> </span><span class="kwd">do</span><span class="pun">{</span><span class="pln"></span><span class="lit">13</span><span class="pln"> top </span><span class="pun">+=</span><span class="pln"> </span><span class="typ">El</span><span class="pun">.</span><span class="pln">offsetTop</span><span class="pun">;</span><span class="pln"></span><span class="lit">14</span><span class="pln"> </span><span class="pun">}</span><span class="kwd">while</span><span class="pun">((</span><span class="typ">El</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="typ">El</span><span class="pun">.</span><span class="pln">offsetParent</span><span class="pun">).</span><span class="pln">nodeName </span><span class="pun">!=</span><span class="pln"> </span><span class="str">'BODY'</span><span class="pun">);</span><span class="pln"></span><span class="lit">15</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> top</span><span class="pun">;</span><span class="pln"></span><span class="lit">16</span><span class="pln"> </span><span class="pun">};</span> |
在设置窗口的scroll事件时，ie使用是document.documentElement，而其他的浏览器都使用document。
接下来是要获得浏览器显示窗口现对于文档的位置，用了下面的代码来计算
<span class="lit">1</span><span class="pln"> </span><span class="com">//读取滚动条的位置和浏览器窗口的显示大小</span><span class="pln"></span><span class="lit">2</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> top </span><span class="pun">=</span><span class="pln"> isGoo </span><span class="pun">?</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">:</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollTop</span><span class="pun">,</span><span class="pln"></span><span class="lit">3</span><span class="pln"> left </span><span class="pun">=</span><span class="pln"> isGoo </span><span class="pun">?</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollLeft </span><span class="pun">:</span><span class="pln">document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollLeft</span><span class="pun">,</span><span class="pln"></span><span class="lit">4</span><span class="pln"> width </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">clientWidth</span><span class="pun">,</span><span class="pln"></span><span class="lit">5</span><span class="pln"> height </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">clientHeight</span><span class="pun">;</span> |
谷歌浏览器要通过body来获得scrollTop，而其他浏览器通过documentElement。
最后迭代判断img的位置，并显示图片
//对所有图片进行批量判断是否在浏览器显示区域内
for(var i=0 ; i < imgs.length; i++){
var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
//判断图片是否在显示区域内
if( _top >= top &&
_left >= left &&
_top <= top+height &&
_left <= left+width){
var _src = imgs[i].getAttribute('_src');
//如果图片已经显示，则取消赋值
if(imgs[i].src !== _src){
imgs[i].src = _src;
}
}
}
[/js]
