快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
更新時(shí)間：2017年01月04日 16:31:13 作者：TNND
目前很多網(wǎng)站，在圖片加載時(shí)均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁面被請(qǐng)求時(shí)，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會(huì)動(dòng)態(tài)加載這些圖片，下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實(shí)現(xiàn)方法，一起來看看吧。
js懶加載圖片
如何提高網(wǎng)頁加載速度？在網(wǎng)頁中有許多img標(biāo)簽，這些標(biāo)簽就是圖片，其屬性src則是指向服務(wù)器地址，當(dāng)瀏覽器從上往下讀取到src標(biāo)簽中的地址時(shí)，瀏覽器就會(huì)開啟線程，加載這張圖片。而并不是等到整張頁面都解析完成才加載圖片。我們要做的就是加載用戶可視范圍內(nèi)的圖片。
js懶加載圖片的目的
1.網(wǎng)頁優(yōu)化，提高網(wǎng)頁加載速度
2.頁面優(yōu)化友好，提高SEO收錄與排名
3.提高用戶體驗(yàn)，減少服務(wù)器壓力
實(shí)例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片懶加載(可視區(qū)域加載)</title>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
min-height: 100%;
}
#SB {
margin: 0;
padding: 0;
list-style: none;
}
#SB .in {
border: 1px solid red;
margin: 10px;
text-align: center;
height: 400px;
width: 400px;
float: left;
}
.in img {
border: none;
vertical-align: middle;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<ul id="SB">
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
<li class="in"><img src="" data-imgurl="img/1.jpg"></li>
<li class="in"><img src="" data-imgurl="img/2.jpg"></li>
<li class="in"><img src="" data-imgurl="img/3.jpg"></li>
<li class="in"><img src="" data-imgurl="img/4.jpg"></li>
<li class="in"><img src="" data-imgurl="img/5.jpg"></li>
<li class="in"><img src="" data-imgurl="img/6.jpg"></li>
<li class="in"><img src="" data-imgurl="img/7.jpg"></li>
<li class="in"><img src="" data-imgurl="img/8.jpg"></li>
<li class="in"><img src="" data-imgurl="img/9.jpg"></li>
<li class="in"><img src="" data-imgurl="img/10.jpg"></li>
<li class="in"><img src="" data-imgurl="img/11.jpg"></li>
<li class="in"><img src="" data-imgurl="img/12.jpg"></li>
<li class="in"><img src="" data-imgurl="img/13.jpg"></li>
<li class="in"><img src="" data-imgurl="img/14.jpg"></li>
<li class="in"><img src="" data-imgurl="img/15.jpg"></li>
<li class="in"><img src="" data-imgurl="img/16.jpg"></li>
</ul>
<script type="text/javascript">
var aImages = document.getElementById("SB").getElementsByTagName('img'); //獲取id為SB的文檔內(nèi)所有的圖片
loadImg(aImages);
window.onscroll = function() { //滾動(dòng)條滾動(dòng)觸發(fā)
loadImg(aImages);
};
//getBoundingClientRect 是圖片懶加載的核心
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; //圖片顯示標(biāo)志位
//arr[i].style.cssText = "opacity: 0;";
(function(i) {
setTimeout(function() {
if(arr[i].dataset) { //兼容不支持data的瀏覽器
aftLoadImg(arr[i], arr[i].dataset.imgurl);
} else {
aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
}
arr[i].style.cssText = "transition: 1s; opacity: 1;" //相當(dāng)于fadein
}, 500)
})(i);
}
}
}
function aftLoadImg(obj, url) {
var oImg = new Image();
oImg.onload = function() {
obj.src = oImg.src; //下載完成后將該圖片賦給目標(biāo)obj目標(biāo)對(duì)象
}
oImg.src = url; //oImg對(duì)象先下載該圖像
}
</script>
</body>
</html>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了js判斷設(shè)備是否為PC并調(diào)整圖片大小,需要的朋友可以參考下2014-02-02
本文主要介紹了JavaScript制作年歷的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2012-05-05
本文主要介紹了JS中的工廠模式實(shí)踐。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Iframe自適應(yīng)高度絕對(duì)好使的代碼 兼容IE,遨游，火狐
Iframe自適應(yīng)高度絕對(duì)好使的代碼IE,遨游，火狐都兼容,需要的朋友可以參考下。2011-01-01
前端很多項(xiàng)目中，都有文件下載的需求，特別是JS生成文件內(nèi)容，然后讓瀏覽器執(zhí)行下載操作（例如在線圖片編輯、在線代碼編輯、iPresst等
2014-03-03 
前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時(shí)候經(jīng)常都會(huì)一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對(duì)大家有所幫助
2023-12-12 
Typescript定義多個(gè)接口類型聲明的方式小結(jié)
這篇文章主要介紹了Typescript定義多個(gè)接口類型聲明的方式小結(jié),在 TypeScript 中,您可以使用交叉類型(&)或聯(lián)合類型(|)來組合多個(gè)接口,從而實(shí)現(xiàn)多個(gè)接口類型的混合,文中通過代碼講解的非常詳細(xì),需要的朋友可以參考下
2025-01-01 
ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法
這篇文章主要介紹了ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12 
js 返回時(shí)間戳所對(duì)應(yīng)的具體時(shí)間
返回unix時(shí)間戳所對(duì)應(yīng)的具體時(shí)間的代碼
2010-07-07