標籤：預設 type default src display attribute size console border
作用:保證頁面開啟的速度（3s之內如果首頁打不開就已經算是死亡頁面了）
原理:
1）、對於首屏內容中的圖片:首先給對應的地區一張預設圖片占的位置（預設圖需要非常的小，一般可以維持在5kb以內），當首屏內容都載入完成後（或者也可以給一個延遲的時間），我在開始載入真實的圖片
2）、對於其他屏中的圖片：也是給一張預設的圖片佔位，當捲軸滾動到對應地區的時候，我們再開始載入真實的圖片
擴充：資料的非同步載入，開始只把前兩屏的資料載入綁定出來，後面的資料不進行處理，當頁面滾動到對應地區的時候，在重新請求資料繫結渲染資料
具體可以看一下
首屏的消極式載入代碼如下:
<!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;/*給當前的地區加一個預設圖佔位，告訴使用者此處的圖片正在載入中*/ } #banner img{ display:none;/*在開始的時候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其預設是隱藏的，當真實的圖片載入完成後在顯示*/ width:100%; height:100%; } </style></head><body> <div id=‘banner‘> <!--trueImg是當前標籤的自訂屬性，儲存的是真實圖片的地址--> <img src="" 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屬性的時候，不僅控制台會報錯，而且頁面中還會出現碎圖 //擷取圖片的地址，驗證地址的有效性，是有效才賦值，不是有效是不進行處理的 // var oImg = document.createElement(‘img‘) var oImg = new Image;//建立一個臨時的IMG標籤 oImg.src = imgFir.getAttribute(‘trueImg‘); oImg.onload = function(){//當圖片能夠正常載入 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;/*給當前的地區加一個預設圖佔位，告訴使用者此處的圖片正在載入中*/ } #banner img{ display:none;/*在開始的時候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其預設是隱藏的，當真實的圖片載入完成後在顯示*/ width:100%; height:100%; } </style></head><body> <div id=‘banner‘> <!--trueImg是當前標籤的自訂屬性，儲存的是真實圖片的地址--> <img src="" 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){ //當條件成立，我們載入真實的圖片，第一次載入完成後，我們在讓頁面滾動的過程中A<B一直成立，又重新執行下面的操作，導致了重複給一個容器中的圖片進行載入 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;//設定一個自訂屬性告訴瀏覽器我已經把圖片載入完了(不管是否正常的載入，只要處理過一次以後都不需要處理了) } } </script></body></html>
js學習總結----消極式載入思想和首屏消極式載入
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
