重點集合

<div class="box"> <!-- 圖片的src路徑為空 lazyload="true" data-original 值為真實的圖片地址 --><img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div> <script type="text/javascript">window.onload = function () {//獲取當前瀏覽器的視口高度var viewHeight = document.documentElement.clientHeight;console.log(viewHeight)//鼠標滾動回調function lazyload() {var img = document.getElementsByClassName('img'); //獲取所有圖片集合console.log(img)//遍歷圖片集合for (let item of img) {//獲取圖片距視口頂部的距離var imgHeight = item.getBoundingClientRect();//判斷當圖片出現在視口160px時把地址放到src中，顯示出圖片if (imgHeight.top < (viewHeight - 360)) {item.src = item.getAttribute("data-original")console.log(item.src)}}}lazyload(); //頁面加載時把當前視口中的圖片加載進來document.addEventListener('scroll', lazyload);}</script>

HTML data-* 屬性

使用 data-* 屬性來嵌入自定義數據
所有主流瀏覽器都支持 data-* 屬性
定義和用法
data-* 屬性用于存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性包括兩部分：

屬性名不應該包含任何大寫字母，并且在前綴 “data-” 之后必須有至少一個字符
屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 “data-” 的自定義屬性。

getBoundingClientRect 方法介紹

理解：getBoundingClientRect用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。

1.語法：這個方法沒有參數。

rectObject = object.getBoundingClientRect();

2.返回值類型：

rectObject.top：元素上邊到視窗上邊的距離;

rectObject.right：元素右邊到視窗左邊的距離;

rectObject.bottom：元素下邊到視窗上邊的距離;

rectObject.left：元素左邊到視窗左邊的距離;

總結

以上是生活随笔為你收集整理的JS原生 实现图片懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。