JavaScript 圖片載入

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

網站開發中，某些頁面效果（如：圖片翻轉）需要圖片能夠立即顯示；也有些頁面圖片比較多，下載時間比較長，需要在圖片未下載完成前顯示其他圖片（表示圖片正在下載），下載完成後才把圖片顯示出來。
要實現這些效果，一般都會用到JavaScript裡邊的Image對象。

Image對象的主要屬性

src

圖片地址。

complete

表示Image是否被瀏覽器緩衝或已經載入到當前頁面。
該屬性在IE瀏覽器中有點不同，IE瀏覽器中complete屬性是在onload事件之後才改變，而Firefox、Opera等瀏覽器則在onload之前就已經改變。即如下代碼，在圖片能夠正常下載並且圖片未被瀏覽器緩衝的情況下，IE與Firefox、Opera等瀏覽器所執行的結果是不同的。

var testImage=new Image();testImage.src="http://www.olnote.com/images/logo.gif";testImage.onload=function(){alert(testImage.complete);//在滿足上文提到的條件下，IE顯示“false”，而Firefox、Opera等瀏覽器顯示“true”。};

Image對象的主要事件

onload

圖片下載完成後觸發。
關於該事件，IE與Firefox、Opera等瀏覽器也是有區別的。如果圖片已經被瀏覽器緩衝起來或已經下載到當前頁面，則IE不會觸發該事件。
以下是先載入一張圖片，再次載入同一張圖片的樣本。（註：這裡不要把圖片設定為瀏覽器緩衝）

var url="http://www.olnote.com/images/logo.gif";var loadImage=new Image();loadImage.src=url;loadImage.onload=function(){   alert("onload事件被觸發");   var againLoadImage=new Image();   againLoadImage.src=url;   againLoadImage.onload=function(){//由於圖片已經載入到當前頁面，在IE中，onload事件不會再被觸發。      alert("onload事件再次被觸發");   }        }

onerror

圖片下載失敗的時候觸發。

JavaaScript圖片載入樣本（瀏覽器安全色）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>JavaScript 圖片載入</title> <script type="text/javascript"> //url：圖片地址。imageEvent：圖片處理事件，imageEvent.onload圖片載入完成觸發，imageEvent.onerror圖片載入失敗觸發。 function loadImage(url,imageEvent){ var img = new Image();//建立一個Image對象，實現圖片的載入。 if(imageEvent.onerror!=null){ img.onerror=function(){//圖片下載異常時非同步呼叫imageEvent.onerror函數。 imageEvent.onerror.call(img);//將imageEvent.onerror函數的this替換為Image對象。 }; } img.src = url; if (imageEvent.onload!=null){ if(img.complete){//如果圖片已經存在於瀏覽器緩衝或者已經載入到當前頁面。 imageEvent.onload.call(img);//將imageEvent.onload函數的this替換為Image對象。 return;//直接返回，不用再處理onload或者onerror事件。 } else{ img.onload=function(){//圖片下載完畢時非同步呼叫imageEvent.onload函數。 imageEvent.onload.call(img);//將imageEvent.onload函數的this替換為Image對象。 }; } } } </script></head><body> <input type="text" id="imageUrl" value="http://www.olnote.com/images/logo.gif" style="width: 350px;" /> <input value="載入圖片" type="button" onclick="loadImageTest()" /> <div id="imageBox"> </div> <script type="text/javascript"> function loadImageTest(){ var imageBox=document.getElementById("imageBox"); var imageUrl=document.getElementById("imageUrl"); var maxWidth=imageBox.scrollWidth; imageBox.innerHTML="圖片載入中。。。"; var imageEvent={ onerror:function(){ imageBox.innerHTML="圖片載入失敗。"; }, onload:function(){ imageBox.innerHTML=""; if(this.width>maxWidth) { this.width=maxWidth; } imageBox.appendChild(this); } }; loadImage(imageUrl.value,imageEvent); } loadImageTest(); </script></body></html>

來源：http://www.olnote.com/itlife/note/100000069.aspx

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More