原生JS的（可視區域，向上滾動向下滾動兩種）圖片懶載入
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; } img { border: none; vertical-align: middle; height: 400px; width: 400px; } @keyframes fadeIn { 0% { opacity: 0.5; } 100% { opacity: 1; } } </style> </head> <body> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> <img src="" data-src="111.jpg" alt=""><br/> </body> </html> <script> var imgs = [] imgs = document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if (checkShow(imgs[i]) && !isLoaded(imgs[i])) { loadImg(imgs[i]);//載入當前img } } window.addEventListener('scroll', function () {//滾動的觸發事件 for(var i=0;i<imgs.length;i++){ if (checkShow(imgs[i]) && !isLoaded(imgs[i])) { loadImg(imgs[i]);//載入當前img } } }) function checkShow($img) { // 傳入img物件 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度 var windowHeight = document.documentElement.clientHeight; //可見區域高度 var offsetTop = $img.offsetTop //目標標籤img相對於document頂部的位置 var imgHeight = $img.height; //獲取圖片高度，在向上滾動會用到，比如網頁一開啟就定位到了中間或底部，就會向上滾動 if (offsetTop < (scrollTop + windowHeight) && (offsetTop+imgHeight) > scrollTop) { //在2個臨界狀態之間的就為出現在視野中的，只加載出現在視野中的圖片 return true; } return false; } function isLoaded($img) { return $img.getAttribute('data-imgurl') === $img.getAttribute('src'); //如果data-imgurl和src相等那麼就是已經載入過了 } function loadImg($img) { $img.src = $img.getAttribute('data-imgurl') // 把自定義屬性中存放的真實的src地址賦給src屬性 $img.style.cssText = "animation:fadeIn 1s" //類似fadeIn效果 } </script>