1 <script type="text/javascript">
2 function delayload(option){
3 //读取参数
4 //图片未加载时显示的图片
5 var src = option.src ? option.src : '',
6 //指定那些id下的img元素使用延迟显示
7 id = option.id ? option.id : [];
8 //图片列表
9 var imgs = [];
10 //获得所有的图片元素
11 for(var i=0 ; i < id.length ; i++){
12 var idbox = document.getElementById(id[i]),_imgs;
13 if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
14 for(var t=0 ; t < _imgs.length ; t++){
15 imgs.push(_imgs[t]);
16 }
17 }
18 }
19 //将所有的图片设置为指定的loading图片
20 for(var i=0 ; i < imgs.length ; i++){
21 //图片本来的图片路径放入_src中
22 imgs[i].setAttribute('_src',imgs[i].src);
23 imgs[i].src = src;
24 }
25 //取元素的页面绝对 X位置
26 var getLeft = function(El){
27 var left = 0;
28 do{
29 left += El.offsetLeft;
30 }while((El = El.offsetParent).nodeName != 'BODY');
31 return left;
32 };
33 //取元素的页面绝对 Y位置
34 var getTop = function(El){
35 var top = 0;
36 do{
37 top += El.offsetTop;
38 }while((El = El.offsetParent).nodeName != 'BODY');
39 return top;
40 };
41 //是否为ie，并读出ie版本
42 var isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
43 isIE && (isIE = RegExp.$1);
44 //是否为chrome
45 var isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
46 //获得可以触发scroll事件的对象
47 var box = isIE ? document.documentElement : document;
48 //body元素的scroll事件
49 var onscroll = box.onscroll = function(){
50 //读取滚动条的位置和浏览器窗口的显示大小
51 var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
52 left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
53 width = document.documentElement.clientWidth,
54 height = document.documentElement.clientHeight;
55 //对所有图片进行批量判断是否在浏览器显示区域内
56 for(var i=0 ; i < imgs.length; i++){
57 var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
58 //判断图片是否在显示区域内
59 if( _top >= top &&
60 _left >= left &&
61 _top <= top+height &&
62 _left <= left+width){
63 var _src = imgs[i].getAttribute('_src');
64 //如果图片已经显示，则取消赋值
65 if(imgs[i].src !== _src){
66 imgs[i].src = _src;
67 }
68 }
69 }
70 };
71 var load = new Image();
72 load.src = src;
73 load.onload = function(){
74 onscroll();
75 };
76 }
77 delayload({id:['out1','out2'],src:'http://www.cmiley.com/php/archive/16/416/ccdfaf4d2ee879c21ae1b523a372d3fc.160.gif'});
78 </script>
