js学习总结----多张图片的延迟加载实战
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--做移动端响应式必须加的样式--> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } ul,li{ list-style:none; } img{ display:block; border:none; } /* 最外层容器不设定宽高的 */ .news{ padding:10px; } .news li{ height:60px; padding:10px 0; border-bottom:1px solid #dedede; position:relative; } .news li > div:nth-child(1){ position:absolute; top:10px; left:0; width:75px; height:60px; background:url('img/default.png') no-repeat center center; background-size:100% 100%;/*设置背景图片大小*/ } .news li > div:nth-child(1) img{ width:100%; height:100%; display:none; opacity:0; } .news li > div:nth-child(2){ height:60px; margin-left:80px; } .news li > div:nth-child(2) h2{ height:20px; line-height:20px; /*实现文字超出隐藏*/ overflow:hidden; text-overflow:ellipsis; white-space: nowrap; } .news li > div:nth-child(2) p{ line-height:20px; font-size:12px; color:#ccc; } </style> </head> <body> <ul id='news' class='news'> <li> <div> <img src="" alt=""> </div> <div> <h2>我是一个标题</h2> <p>我是内容</p> </div> </li> </ul> <script> var news = document.getElementById('news') var imgList = news.getElementsByTagName('img') //1、获取需要绑定的数据(Ajax) var jsonData = null; ~function(){ var xhr = new XMLHttpRequest(); //URL地址后面加的随机数是在清除每一次请求数据时候(GET请求)产生的缓存 xhr.open('GET','data.json?_='+Math.random(),false) xhr.onreadystatechange = function(){ if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){ var val = xhr.responseText; jsonData = utils.formatJSON(val) } } xhr.send(null) }() //2、数据绑定->把jsonData存储的数据绑定到页面中(字符串拼接) ~function(){ var str = ''; if(jsonData){ for(var i = 0,len = jsonData.length;i<len;i++){ var curData = jsonData[i] str+='<li>'; str+='<div><img src="" trueImg="'+curData['img']+'"></div>'; str+='<div>'; str+='<h2>'+curData['title']+'</h2>'; str+='<p>'+curData['desc']+'</p>'; str+='</div>'; str+='</li>'; } } news.innerHTML = str; }() //3、图片延迟加载 //我先编写一个方法实现单张图片的延迟加载 function lazyImg(curImg){ var oImg = new Image; oImg.src = curImg.getAttribute('trueImg'); oImg.onload = function(){ curImg.src = this.src; curImg.style.display = "block"; fadeIn(curImg) oImg = null }; curImg.isLoad = true; } function fadeIn(curImg){ var duration = 500,interval = 10,target = 1; var step = (target/duration)*interval; var timer = window.setInterval(function(){ var curOP = utils.getCss(curImg,'opacity'); if(curOP>1){ curImg.style.opacity = 1; window.clearInterval(timer) return } curOP+=step; curImg.style.opacity = curOP; },interval) } function handleAllImage(){ for(var i = 0,len = imgList.length;i<len;i++){ var curImg = imgList[i]; //当前的图片处理过了就不需要在重新的进行处理了 if(curImg.isLoad = true){ continue; } //只有A小于B的时候才进行处理,当前图片是隐藏的,我们其实计算的是它父节点的A var curImgPar = curImg.parentNode; var A = utils.offset(curImgPar).top + curImgPar.offsetHeight; var B = utils.win('clientHeight')+utils.win('scrollTop'); if(A<B){ lazyImg(curImg); } } } //4、开始的时候一秒加载第一屏的图片,当滚动条滚动的时候,再加载剩余的图片 window.setTimeout(handleAllImage,1000); window.onscroll = handleAllImage; </script> </body> </html>