JavaScript實現圖片懶載入(Lazyload)_javascript技巧

懶載入的意義（為什麼要使用懶載入）

對頁面載入速度影響最大的就是圖片，一張普通的圖片可以達到幾M的大小，而代碼也許就只有幾十KB。當頁面圖片很多時，頁面的載入速度緩慢，幾S鐘內頁面沒有載入完成，也許會失去很多的使用者。

所以，對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視地區內的圖片先不做載入， 等到滾動到可視地區後再去載入。這樣子對於頁面載入效能上會有很大的提升，也提高了使用者體驗。

原理

將頁面中的img標籤src指向一張小圖片或者src為空白，然後定義data-src（這個屬性可以自訂命名，我才用data-src）屬性指向真實的圖片。

<img src="default.jpg" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

當載入頁面時，先把可視地區內的img標籤的data-src屬性值負給src，然後監聽滾動事件，把使用者即將看到的圖片載入。這樣便實現了懶載入。

代碼

在寫代碼前，需要瞭解各種高度。先看這篇文章scrollTop,offsetTop,scrollLeft,offsetLeft

<head><meta charset="UTF-8"><title>Document</title><style>img {display: block;margin-bottom: 50px;width: 400px;height: 400px;}</style></head><body><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="" data-src="yun_qi_img/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""></body>

JavaScript

<script>var num = document.getElementsByTagName('img').length;var img = document.getElementsByTagName("img");var n = 0; //儲存圖片載入到的位置，避免每次都從第一張圖片開始遍曆lazyload(); //頁面載入完畢載入可是地區內的圖片window.onscroll = lazyload;function lazyload() { //監聽頁面滾動事件var seeHeight = document.documentElement.clientHeight; //可見地區高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //捲軸距離頂部高度for (var i = n; i < num; i++) {if (img[i].offsetTop < seeHeight + scrollTop) {if (img[i].getAttribute("src") == "") {img[i].src = img[i].getAttribute("data-src");}n = i + 1;}}}</script>

jQuery

<script>var n = 0,imgNum = $("img").length,img = $('img');lazyload();$(window).scroll(lazyload);function lazyload(event) {for (var i = n; i < imgNum; i++) {if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {if (img.eq(i).attr("src") == "") {var src = img.eq(i).attr("data-src");img.eq(i).attr("src", src);n = i + 1;}}}}</script>

如果大家感覺此文介紹的不夠詳細，大家可以參考下這篇文章：

JavaScript如何?圖片懶載入(lazyload) 提高使用者體驗(增強版)

以上所述是小編給大家介紹的JavaScript實現圖片懶載入(Lazyload)，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！