原生js實現圖片懶載入+加入節流

這兩天在學習圖片的懶載入實現，看了很多大佬的博客，終於有了點成果。現在用了其中一位大佬的文章中的代碼實現了圖片懶載入並且在其基礎上加入了節流函數。

原理就不多講了，有需要的可以去大佬的文章看看。大佬文章可以從這裡進->（https://www.jianshu.com/p/9b30b03f56c2）。

先上HTML結構：

1     <div></div>
2     <img src="" id="i1" data-src="image1">
3     <div></div>
4     <img src="" id="i2" alt="" data-src="image2">

然後是樣式：

 1 <style>
 2         * {
 3             padding: 0;
 4             margin: 0;
 5         }
 6 
 7         div {
 8             height: 2000px;
 9         }
10 
11         #i1 {
12             display: block;
13             width: 200px;
14             height: 200px;
15             background-color: red;
16         }
17 
18         #i2 {
19             display: block;
20             width: 200px;
21             height: 200px;
22             background-color: green;
23         }
24     </style>

最後是JavaScript的代碼：

 1 <script>
 2         var lastTime = new Date().getTime();
 3         function lazyLoad() {
 4             //放入節流函數前的準備工作
 5             function preWork() {
 6                 //獲取頁面圖片標簽
 7                 var imgs = document.querySelectorAll("img");
 8                 //可視區高度
 9                 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
10 
11                 [].forEach.call(imgs,function (img) {
12                     //判斷data-src屬性是否存在，不存在代表圖片已經載入過
13                     if (!img.getAttribute('data-src')) {
14                         return;
15                     }
16                     //判斷高度差，替換路徑後移除data-src屬性
17                     if (img.getBoundingClientRect().top < h) {
18                         img.src = img.getAttribute('data-src');
19                         img.removeAttribute('data-src');
20                     }
21                 });
22 
23                 //利用與運算，如果與前面為false，則不運行後面的語句；若為true，繼續運行後面的語句。從而達到路徑替換完後可以執行移除監聽事件的效果
24                 [].every.call(imgs, function (img) {
25                     return !img.getAttribute('data-src');
26                 }) && (window.removeEventListener("scroll", lazyLoad));
27             }
28 
29             //節流函數
30             function throttle() {
31                 var nowTime = new Date().getTime();
32                 if (nowTime - lastTime > 1000) {
33                     preWork();
34                     console.log("節流執行");
35                     lastTime = nowTime;
36                 }
37 
38             }
39 
40             //執行節流函數
41             throttle();
42         }
43 
44         window.addEventListener("scroll", lazyLoad);
45         window.addEventListener("load", lazyLoad);
46 
47     </script>

js的代碼裡面加了一些註釋，希望能幫助大家理解。

本人是前端小菜鳥一枚，代碼里如果出現錯誤希望大家多多包涵併在評論區提出，本人會認真改正的！