網上查了很多圖片懶加載的內容, 但基本上都是jQuery實作的, 沒有說清楚其原理, 所以研究了一下
多的不說, 上代碼, 看不明白的建議看下我的上一篇文章<1. 圖解瀏覽器和用戶設備的寬高等屬性>
HTML部分(圖片地址自己隨意)
<div> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> <img data-src="1.jpg" src="0.gif" alt=""> </div>
JS部分
/* 思路 1.先將圖片地址存在"data-src"中 2.圖片出現在頁面中就將"src"的地址改變 重點 判斷圖片是否出現在頁面中 1.圖片距離頁面頂部的高度 + 螢屏高度 2.頁面距離頂部被卷起來的高度 */ //可操作部分(建議使用前測驗) var m = 500; //值越大頂部加載的越多 var n = 0; //值越大加載的越多 //選定img元素 var imgs = document.getElementsByTagName("img"); //判斷瀏覽器的高度 var win_h = window.innerHeight||document.documentElement.clientHeight; //更換圖片 function replace(num){ //不能直接將img的"src"等于"data-src",所以先獲取"data-src"的值,然后再添加給"src" imgs[num].setAttribute("src", imgs[num].getAttribute("data-src")); } //頁面滾動時判斷滾動到位置(出現在視圖視窗),進行加載 window.onscroll = function(){ //頁面被卷起來的部分的高度 var scroll_top = window.pageYOffset; //圖片距離頁面頂部的高度 for (var i = 0; i < imgs.length; i++) { var c = imgs[i].offsetTop; //當圖片剛好在可視視窗之內時,替換內容 if (c > (scroll_top - m) && c < (scroll_top + win_h - n)) { replace(i); } } } //開始頁面就要加載一部分圖片 window.onscroll();
雖然比較啰嗦, 但是內容詳細. 希望能幫到大家
最終效果如下:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177550.html
標籤：JavaScript
下一篇：前端的發展和未來趨勢