首頁 > 開發者 > JavaScript
基於javascript實現圖片懶載入，javascript實現載入
一、定義
圖片消極式載入也稱為懶載入，消極式載入圖片或符合某些條件時才載入某些圖片，通常用於圖片比較多的網頁。可以減少請求數或者延遲請求數，最佳化效能。
二、呈現形式
【1】延時載入，使用setTimeout或setInterval進行載入延遲，如果使用者在載入前就離開，自然就不會進行載入。
【2】條件載入，符合某些條件或者觸發了某些條件才開始非同步載入。
【3】可視地區載入，僅僅載入使用者可以看到的地區，這個主要監控捲軸來實現，一般距離使用者看到的底邊很近的時候開始載入，這樣能保證使用者下拉時圖片正好接上，不會有太長時間的停頓。
三、基本步驟
【1】網頁中的圖片都設為同一張圖片
【2】給圖片增加data-original = "img/test.jpg"的屬性，儲存圖片的真真實位址
【3】當觸發某些條件時，自動改變該地區的圖片的src屬性為真實的地址
四、應用
1、點擊按鈕顯示圖片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}img{ height: 100px; width: 100px;}</style></head><body><button>載入圖片</button><img src="#" alt="測試" data-original = "img/test.png"><script>var oBtn = document.getElementsByTagName('button')[0];var oImg = document.images[0]; oBtn.onclick = function(){ oImg.src = "img/loading.gif"; if(oImg.dataset){ aftLoadImg(oImg,oImg.dataset.original); }else{ aftLoadImg(oImg,oImg.getAttribute("data-original")); }}function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url;}</script> </body></html>
2、可視區顯示圖片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}img{ border: none; vertical-align: middle;}.in{ border: 1px solid black; margin: 10px; text-align: center; height: 400px; width: 400px; float: left;}.in img{ height: 400px; width: 400px;}</style></head><body><ul class="list"> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img4.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img1.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img2.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img3.gif"></li> <li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/img4.gif"></li> </ul><script>var oBtn = document.getElementsByTagName('button')[0];var aImages = document.images;loadImg(aImages);window.onscroll = function(){ loadImg(aImages);};function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original")); } (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } }}function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url;}</script> </body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，順利實現javascript圖片懶載入。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
