<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片懶加載(可視區域加載)</title> <style> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; } #SB { margin: 0; padding: 0; list-style: none; } #SB .in { border: 1px solid red; margin: 10px; text-align: center; height: 400px; width: 400px; float: left; } .in img { border: none; vertical-align: middle; height: 400px; width: 400px; } </style> </head> <body> <ul id="ljz"> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> <li class="in"><img src="" data-imgurl="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"></li> </ul> <script type="text/javascript"> var aImages = document.getElementById("ljz").getElementsByTagName('img'); //獲取id爲ljz的文檔內全部的圖片 loadImg(aImages); window.onscroll = function() { //滾動條滾動觸發 loadImg(aImages); }; //getBoundingClientRect 是圖片懶加載的核心 function loadImg(arr) { for(var i = 0, len = arr.length; i < len; i++) { if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) { arr[i].isLoad = true; //圖片顯示標誌位 //arr[i].style.cssText = "opacity: 0;"; (function(i) { setTimeout(function() { if(arr[i].dataset) { //兼容不支持data的瀏覽器 aftLoadImg(arr[i], arr[i].dataset.imgurl); } else { aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl")); } arr[i].style.cssText = "transition: 1s; opacity: 1;" //至關於fadein }, 200) })(i); } } } function aftLoadImg(obj, url) { var oImg = new Image(); oImg.onload = function() { obj.src = oImg.src; //下載完成後將該圖片賦給目標obj目標對象 } oImg.src = url; //oImg對象先下載該圖像 } </script> </body> </html>
懶加載js寫法二:javascript
<script type="text/javascript"> //js懶加載 var aImg = document.getElementById('ljz').querySelectorAll('img'); var len = aImg.length; //獲取圖片數量 var n = 0;//存儲圖片加載到的位置,避免每次都從第一張圖片開始遍歷 window.onload = function(){ window.scrollTo(0,1); } window.onscroll = function() { //滾動執行 var seeHeight = document.documentElement.clientHeight; //獲取可見區域高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //獲取body內滾動條位置 for (var i = n; i < len; i++) { if (aImg[i].offsetTop <= seeHeight + scrollTop) { if (aImg[i].getAttribute('src') == '') { aImg[i].src = aImg[i].getAttribute('data-imgurl'); if(aImg[i].getAttribute('src') == ''){ aImg[i].src = 'image/zwtp.png'; } } n = i + 1; console.log('n = ' + n); } } }; </script>