js图片实现延迟加载

 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>