當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS原生 实现图片懒加载
生活随笔
收集整理的這篇文章主要介紹了
JS原生 实现图片懒加载
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
重點集合
<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原生 实现图片懒加载的全部內容,希望文章能夠幫你解決所遇到的問題。