小編帶大家了解一下為什么要實作圖片懶加載？
其原理就是用戶在打開頁面時，圖片會影響頁面的打開速度，導致頁面訪問量不高，用戶體驗不好，一張圖的大小就是幾M，通俗的講就是對網頁性能的一種優化的方式，優先顯示可視區的圖片，當需要顯示時，再發送圖片請求，避免打開頁面加載過多資源，
頂部
一張圖便于我們理解js代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<!-- 自定義一個lazyload-src屬性 -->
<img src="../img/loading.gif" lazyload-src="../img/1.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/2.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/3.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/4.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/5.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/6.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/7.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/8.gif" alt="">
<img src="../img/loading.gif" lazyload-src="../img/9.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/1.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/10.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/11.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/12.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/13.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/14.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/15.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/16.jpg" alt="">
<img src="../img/loading.gif" lazyload-src="../img/17.jpg" alt="">
<script>
/*
圖片懶加載思路
1.img的src屬性=loading圖，添加自定義屬性=真是的地址
2.判斷如果圖片進入可視區，src==真實的圖片地址
滾動條高度+頁面內容的高度>圖片距離頁面頂部的距離
*/
function lazyload(){
var imgs=document.querySelectorAll("img");//獲取所有圖片的節點
var h=window.innerHeight;//獲取頁面內容的高度
var s=window.scrollY;//獲取滾動條的高度
for(let i=0;i<imgs.length;i++){
if(h+s>imgs[i].offsetTop){//判斷如果內容高+滾動條高>圖片可視區的高度
setTimeout(function(){//添加一個計時器
imgs[i].src=imgs[i].getAttribute("lazyload-src");
},1000)
}
}
}
lazyload();
//頁面一打開就加載
window.onscroll=function(){
lazyload();
}
</script>
</body>
</html>
回到頂部
以上就是js實作圖片懶加載的較簡單的方法，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/240068.html
標籤：其他
上一篇：JS學習筆記之JS預決議
下一篇：jQuery實作放大鏡效果