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>