<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>延迟加载图片</title> <style> *{margin:0; padding:0;} .hh{height:500px; background:rgba(20,10,50,.2);} .wrap{height:300px; width:300px; background:rgba(255,200,200,.7); position:relative } #imgWrap{ position:relative;} img{display:block;} #backToTop{width:37px; height:38px;position:fixed; bottom:10px; right:10px; display:none; background:url("http://img1.bdstatic.com/static/searchresult/img/result-huge-bg_2c8c18f.png") 1px 0;} #backToTop:hover{background:url("http://img1.bdstatic.com/static/searchresult/img/result-huge-bg_2c8c18f.png") -37px 0;} </style> </head> <body> <div class="hh"></div> <div id="imgWrap" > <div class="wrap"> <img _src="images/1.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/2.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/3.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/4.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/5s.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/6.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/7.jpg" src="images/blanck.png" width=200 height=200 /> </div> </div> <div class="hh"></div> <div id="imgWrap" > <div class="wrap"> <img _src="images/1.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/2.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/3.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/4.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/5s.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/6.jpg" src="images/blanck.png" width=200 height=200 /> </div> <div class="wrap"> <img _src="images/7.jpg" src="images/blanck.png" width=200 height=200 /> </div> </div> <a href="javascript:;" id="backToTop"></a> </body> </html> <script type="text/javascript"> function lazyLoadImg(id){ this.obj=obj; this.aImg=this.obj.getElementsByTagName("img"); this.screnH=document.documentElement.clientHeight||document.body.clientHeight; this.init(); } lazyLoadImg.prototype.init=function(){ var _this=this; var t=document.body.scrollTop || document.documentElement.scrollTop; console.log(t); this.judge(t); addEvent(window,"scroll",function(){ var t =document.documentElement.scrollTop || document.body.scrollTop; _this.judge(t); }) } lazyLoadImg.prototype.judge=function(t){ var aImg=this.aImg; var len=aImg.length; var screnH=this.screnH; for(var i=0;i<len;i++){ var src=aImg[i].getAttribute("_src"); if(src){ var _src=aImg[i].getAttribute("src"); if(src && this.disTop(aImg[i])-t<screnH){ aImg[i].setAttribute("src",src); aImg[i].onerror=function(){ this.setAttribute("src",_src); console.log("图片加载失败喽") } aImg[i].removeAttribute("_src"); } } } } lazyLoadImg.prototype.getCss=function(obj,attr){ return (obj.currentStyle || window.getComputedStyle(obj,false))[attr]; } lazyLoadImg.prototype.disTop=function(obj){ var tt=obj.offsetTop; while(obj.parentNode.nodeName.toLocaleLowerCase()!=="html"){ obj=obj.parentNode; if(this.getCss(obj,"position")!="static" && obj.offsetTop){ tt=tt+obj.offsetTop; } } return tt; } var obj=document.getElementById("imgWrap"); new lazyLoadImg(obj); function addEvent(obj,event,fn){ if(obj.addEventListener){ obj.addEventListener(event,fn,true) }else{ obj.attachEvent("on"+event,fn) } } function backTop(json){ addEvent(window,"scroll",function(){ var nTop=document.body.scrollTop || document.documentElement.scrollTop; if(nTop>json.maxTop){ json.obj.style.display="block"; }else{ json.obj.style.display="none"; } }) addEvent(json.obj,"click",function(){ var nTop=document.body.scrollTop || document.documentElement.scrollTop; var nLeft=document.body.scrollLeft || document.documentElement.scrollLeft; var allStep=Math.ceil(json.cost/30); var n=0; json.obj.timer=setInterval(function(){ n++; var curPos=nTop*(1-n/allStep*n/allStep); window.scrollTo(nLeft,curPos) if(n===allStep){ clearInterval(json.obj.timer); } },30) }) } var obj=document.getElementById("backToTop"); backTop({maxTop:300,obj:obj,cost:500}); </script>
我就想知道这个可以不可以上前端的头条新闻，丫的