本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
