一、定義
圖片延遲加載也稱為懶加載，延遲加載圖片或符合某些條件時才加載某些圖片，通常用于圖片比較多的網(wǎng)頁?？梢詼p少請求數(shù)或者延遲請求數(shù)，優(yōu)化性能。
二、呈現(xiàn)形式
【1】延時加載，使用setTimeout或setInterval進行加載延遲，如果用戶在加載前就離開，自然就不會進行加載。
【2】條件加載，符合某些條件或者觸發(fā)了某些條件才開始異步加載。
【3】可視區(qū)域加載，僅僅加載用戶可以看到的區(qū)域，這個主要監(jiān)控滾動條來實現(xiàn)，一般距離用戶看到的底邊很近的時候開始加載，這樣能保證用戶下拉時圖片正好接上，不會有太長時間的停頓。
三、基本步驟
【1】網(wǎng)頁中的圖片都設(shè)為同一張圖片
【2】給圖片增加data-original = "img/test.jpg"的屬性，保存圖片的真實地址
【3】當(dāng)觸發(fā)某些條件時，自動改變該區(qū)域的圖片的src屬性為真實的地址
四、應(yīng)用
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、可視區(qū)顯示圖片
<!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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，順利實現(xiàn)javascript圖片懶加載。
新聞熱點
疑難解答
