js懶加載圖片
如何提高網(wǎng)頁(yè)加載速度？在網(wǎng)頁(yè)中有許多img標(biāo)簽，這些標(biāo)簽就是圖片，其屬性src則是指向服務(wù)器地址，當(dāng)瀏覽器從上往下讀取到src標(biāo)簽中的地址時(shí)，瀏覽器就會(huì)開(kāi)啟線程，加載這張圖片。而并不是等到整張頁(yè)面都解析完成才加載圖片。我們要做的就是加載用戶可視范圍內(nèi)的圖片。
js懶加載圖片的目的
1.網(wǎng)頁(yè)優(yōu)化，提高網(wǎng)頁(yè)加載速度
2.頁(yè)面優(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í)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
