Javascript中關於圖片的延遲載入詳解

這篇文章主要介紹了Javascript之圖片的延遲加載的實例詳解的相關資料,這裡對延遲加載和異步加載進行了詳解和使用方法，需要的朋友可以參考下

Javascript之圖片的延遲載入的實例詳解

作用：保證頁面開啟的速度(3s之內打不開頁面，就已經算是死亡頁面了)

原則：

    1）對於首屏內容中的圖片：首先給對應的區域一張預設圖片佔著位置(預設圖片需要非常小，一般可以維持在5kb以內)，當首屏內容都載入完成後(或也可以給一個延遲時間)，再開始載入真實圖片

    2）對於其他螢幕中的圖片：也是給一張預設的圖片佔位，當捲軸滾動到對應區域的時候，我們再開始載入真實的圖片

    擴充：資料的非同步載入：開始只把前兩螢幕的資料載入綁定出來，後面的資料不進行處理，當頁面滾動到對應區域的時候，在重新請求數據，然後綁定渲染數據

首先讓img標籤中的src為空，讓imgdisplay:none；在外面的p上的背景圖上面綁定一個背景圖片，然後等頁面載入完畢之後，在進行載入圖片；

使用定時器或window.onload事件，然後把取得到的url位址綁定到元素img標籤上的src上；但是，如果取得的真實圖片位址是錯誤的src位址時，不僅控制台會報錯，而且頁面會出現碎圖/叉子圖，影響視覺，以下為處理事件

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

網站效能最佳化：

1、盡量減少向伺服器端請求的次數"減少HTTP請求"

2、css/js檔案合併

3、ICON圖片進行合併->雪碧圖/css script

4、圖片的延遲載入

5、資料的非同步載入

##6、在移動端，我國做的是一個簡單的宣傳頁，盡量的把css和js寫成內嵌式

以上是Javascript中關於圖片的延遲載入詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！