js實現懶載入
阿新 • • 發佈：2018-11-11
當一個頁面有很多資料的時候，需要全部載入後，才顯示，網速不好時需要等很久。當用懶載入後，就只加載可視區的資料，反應更快，效果更好。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js Learning -懶載入</title> <style type="text/css"> #box{ width:80%; margin:0 auto; } #box li{ list-style: none; width:180px; height:250px; border: 1px solid black; float:left; margin-left: 20px; margin-top: 20px; } #box img{ width:100%; height:100%; } </style> </head> <body> <div id='box'> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> <li><img alt="懶載入" _src="img/1.png"/></li> </div> </body> <script type="text/javascript"> //獲取所有圖片 var aImage = document.getElementsByTagName('img'); //獲取可視區高度 var height = document.documentElement.clientHeight; //當滾動時觸發 window.onload = window.onscroll = function(){ //得到滾動捲起高度 var scrollTop = document.documentElement.scrollTop; //遍歷所有圖片 for(var i = 0 ; i < aImage.length ; i++ ){ //獲取該圖片舉例網頁頂部和可視區高度,判斷是否顯示 //距網頁頂部高度 var top = aImage[i].offsetTop; console.log('scrollTop='+scrollTop); console.log(top +"<="+ height + scrollTop); if(top <= height + scrollTop){ aImage[i].src = aImage[i].getAttribute('_src'); } } }; </script> </html>