关于JS实现延迟加载
不多说 直接上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; - webkit - box - sizing: border - box; - moz - box - sizing: border - box; - ms - box - sizing: border - box; box - sizing: border - box; } li{ margin: 35px; list-style-type: none; float: left; } .box li img{ opacity: 0; } </style> <script> function getByClass(oparent,oclass){ try { return oparent.querySelectorAll("." + oclass); } catch (ex){ var reset = []; var reg = new RegExp("\\b" + oclass + "\\b"); var oCur = oparent.all; for (var i = 0; i < oCur.length; i++) { if (reg.test(oCur[i].className)) { reset.push(oCur[i]); } }; return reset; } } function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function Stratmove(obj,json,funEnd){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var bStop=true; var curr=parseInt(getStyle(obj,attr)); var spped=0; if(attr=="opacity"){ var curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } spped=(json[attr]-curr)/8; spped=spped>0?Math.ceil(spped):Math.floor(spped); if(curr!=json[attr]){ bStop=false; } if(attr=="opacity"){ obj.style.opacity=(curr+spped)/100; }else{ obj.style[attr]=curr+spped+"px"; } if(bStop){ clearInterval(obj.timer); if(funEnd)funEnd(); } } },30) } window.onload=function(){ var box=getByClass(document,"box")[0]; oimg=box.getElementsByTagName("img"); window.onresize=window.onscroll=function(){ rung(); } function rung(){ var scrltop=document.documentElement.scrollTop||document.body.scrollTop; winH=document.documentElement.clientHeight; for (var i = 0; i < oimg.length; i++) { var imgH=(oimg[i].offsetHeight)/3; imgTop=scrltop+oimg[i].getBoundingClientRect().top; if(imgTop>=scrltop&&winH+scrltop>=imgTop){ Stratmove(oimg[i],{"opacity":100}) } }; } rung(); } </script> </head> <body> <div class="box"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> </ul> </div> </body> </html>
原理就是根据浏览器窗口还有scrollTop来和图片本身的位置进行判断,显示,这里用的是淡入淡出效果,还可以弄其他的效果,看大家的喜好
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。