本文為大家分享了js實現(xiàn)延遲加載思想和首屏延遲加載的具體代碼，供大家參考，具體內(nèi)容如下
作用:保證頁面打開的速度（3s之內(nèi)如果首頁打不開就已經(jīng)算是死亡頁面了）
原理:
1）、對于首屏內(nèi)容中的圖片:首先給對應(yīng)的區(qū)域一張默認圖片占的位置（默認圖需要非常的小，一般可以維持在5kb以內(nèi)），當(dāng)首屏內(nèi)容都加載完成后（或者也可以給一個延遲的時間），我在開始加載真實的圖片
2）、對于其他屏中的圖片：也是給一張默認的圖片占位，當(dāng)滾動條滾動到對應(yīng)區(qū)域的時候，我們再開始加載真實的圖片
擴展：數(shù)據(jù)的異步加載，開始只把前兩屏的數(shù)據(jù)加載綁定出來，后面的數(shù)據(jù)不進行處理，當(dāng)頁面滾動到對應(yīng)區(qū)域的時候，在重新請求數(shù)據(jù)綁定渲染數(shù)據(jù)
具體可以看一下下圖
首屏的延遲加載代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; font-size:14px; } #banner{ margin:10px auto; width:300px; height:150px; border:1px solid green; background:url('img/default.gif') no-repeat center center;/*給當(dāng)前的區(qū)域加一個默認圖占位，告訴用戶此處的圖片正在加載中*/ } #banner img{ display:none;/*在開始的時候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其默認是隱藏的，當(dāng)真實的圖片加載完成后在顯示*/ width:100%; height:100%; } </style></head><body> <div id='banner'> <!--trueImg是當(dāng)前標(biāo)簽的自定義屬性，存儲的是真實圖片的地址--> <img src="" alt="" trueImg="img/jd.jpg"> </div> <script> var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0] window.setTimeout(function(){ // imgFir.src = imgFir.getAttribute('trueImg'); // imgFir.style.display = "block" //以上處理還是不完整的：如果我們獲取的真實圖片的地址是錯誤的，賦值給IMG的SRC屬性的時候，不僅控制臺會報錯，而且頁面中還會出現(xiàn)碎圖 //獲取圖片的地址，驗證地址的有效性，是有效的才賦值，不是有效的是不進行處理的 // var oImg = document.createElement('img') var oImg = new Image;//創(chuàng)建一個臨時的IMG標(biāo)簽 oImg.src = imgFir.getAttribute('trueImg'); oImg.onload = function(){//當(dāng)圖片能夠正常加載 imgFir.src = this.src; imgFir.style.display = "block"; oImg = null console.log('加載完成') } console.log('正在加載中...') },500) </script></body></html>多屏單張圖片的延遲加載
具體代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; font-size:14px; } #banner{ margin:10px auto; width:300px; height:150px; border:1px solid green; background:url('img/default.gif') no-repeat center center;/*給當(dāng)前的區(qū)域加一個默認圖占位，告訴用戶此處的圖片正在加載中*/ } #banner img{ display:none;/*在開始的時候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其默認是隱藏的，當(dāng)真實的圖片加載完成后在顯示*/ width:100%; height:100%; } </style></head><body> <div id='banner'> <!--trueImg是當(dāng)前標(biāo)簽的自定義屬性，存儲的是真實圖片的地址--> <img src="" alt="" trueImg="img/jd.jpg"> </div> <script> var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0] window.onscroll = function(){ if(banner.isLoad){ return; } var A = banner.offsetHeight+utils.offset(banner).top; var B = utils.win("clientHeight") + utils.win("scrollTop"); if(A<B){ //當(dāng)條件成立，我們加載真實的圖片，第一次加載完成后，我們在讓頁面滾動的過程中A<B一直成立，又重新執(zhí)行下面的操作，導(dǎo)致了重復(fù)給一個容器中的圖片進行加載 var oImg = new Image; oImg.src = imgFir.getAttribute('trueImg'); oImg.onload = function(){ imgFir.src = this.src; imgFir.style.display = 'block'; oImg = null; } banner.isLoad = true;//設(shè)置一個自定義屬性告訴瀏覽器我已經(jīng)把圖片加載完了(不管是否正常的加載，只要處理過一次以后都不需要處理了) } } </script></body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
