js預載入和JavaScript Image()對象使用介紹
更新時間：2011年08月28日 17:41:52 作者：
為了解決在canvas使用drawImage()時,遇到img對象來不及加載的問題; 我最終在html文檔加載中,使用了下面"數組加載圖像的辦法”解決,如果有其他方法,請給予指點!
預載入和JavaScript Image()對象
很多high-res圖像真的可以使 Web 站點更加整潔。但是它們也會使站點的訪問速度變慢——圖像是文件，文件使用帶寬，帶寬直接與等待時間相關。是該了解如何通過一個叫做圖像預載入（preloading）的技巧來提高 Web 站點的訪問速度的時候了。
圖像預載入
對于瀏覽器載入圖像來說，只有在對圖像發(fā)送一個 HTTP請求之后，它們才會被瀏覽器載入，對圖像的 HTTP 請求要么使用 ＜img＞ 標記，要么通過方法調用實現。如果使用 JavaScript 腳本來處理在 mouseover 事件時交換圖像，或者在一段時間之后自動更改圖像，那么在從服務器獲取圖像時可能要等上幾秒鐘到幾分鐘的時間。如果使用一個慢速的 Internet 連接，或者要獲取的圖像非常大，或者其它一些情況，這種現象就特別明顯；這樣，延遲就造成你不能達到自己期望的效果。
一些瀏覽器采用一些措施來緩解這一問題，比如試圖通過在本地緩存中存儲圖像，從而使隨后對圖像的調用能夠立即被滿足；但是在圖像第一次被調用時依然會存在一些延遲。預載入是在需要圖像之前將其下載到緩存的一種方法。通過這一措施，當真正需要圖像時，它就可以被立即從緩存中取出，從而能夠立即顯示。
Image() 對象
預載入圖像最簡單的方法是在 JavaScript 中實例化一個新 Image() 對象，然后將需要載入的圖像的 URL 作為參數傳入。假設我們有一個圖像叫做heavyimagefile.jpg，在用戶的鼠標放到一個已經顯示的圖像之上時，我們希望顯示這個圖像。為了預載入這一圖像從而得到較快的響應時間，我們簡單地創(chuàng)建一個 Image() 對象 heavyImage，然后在 onLoad() 事件處理器中將其同時載入。
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
請注意，圖像標記本身不能處理 onMouseOver() 和 onMouseOut() 事件，這就是上例中<img> 標記被包含在一個<a> 標記之中的原因，<a> 標記支持這兩個事件類型。
使用數組載入多個圖像
在實際應用中，我們可能需要預載入多個圖像，而不止一個；例如，在一個包含多個圖像翻卷的菜單欄中，或者在我們試圖創(chuàng)建平滑效果時，都需要預載入多個圖像。其實這并不困難，只要使用 JavaScript 的數組即可實現，如下例所示：
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i )
{
imageObj.src=images[i];
}
}
</script>
在上面的例子中，我們定義一個變量 i和一個 Image() 對象 imageObj。然后定義了一個新數組 images[]，每個數組元素存儲要被預載入的圖像。最后，創(chuàng)建一個 for() 循環(huán)來處理整個數組，并將每個元素賦給 Image() 對象，這樣將其載入到緩存中。
onLoad() 事件處理器
像很多 JavaScript 的其它對象一樣，Image() 對象也有一些事件處理器。其中最有用的一個肯定是 onLoad() 處理器，它在圖像完全載入之后調用。這個事件處理器可以與一個自定義函數聯(lián)系起來，以在圖像完全載入之后執(zhí)行一些特定的任務。下面的例子說明了這一點，在這個例子中，首先在圖像載入時顯示一個“please wait”屏幕，然后在載入完成時將瀏覽器轉到一個新的 URL。
<html>
<head>
<script language="JavaScript">
// create an image object
objImage = new Image();
// set what happens once the image has loaded objImage.onLoad=imagesLoaded();
// preload the image file
objImage.src='images/image1n.gif';
// function invoked on image load
function imagesLoaded()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
當然，你還可以創(chuàng)建一個圖像數組然后在其上進行循環(huán)操作，預載入每個圖像，然后在每一階段跟蹤被載入圖像的數目。一旦所有圖像載入完畢，根據事件處理器的程序邏輯，它就可以將瀏覽器帶入下一個頁面（或者執(zhí)行其它任務）。
預載入和多狀態(tài)菜單
現在，如何在實際應用程序中使用所有你學到的理論？下面的這段代碼是我最近偶爾編寫的一個菜單欄，這個菜單欄由一些按鈕（圖像鏈接）組成，每個按鈕具有三種狀態(tài)：正常、懸停和點擊。因為按鈕具有多種狀態(tài)，所以很有必要使用圖像預載入，以保證菜單的狀態(tài)能夠快速地反應。清單A中的代碼說明了實現方法。
清單A 中的HTML 代碼設置了一個由四個按鈕組成的菜單，每個按鈕具有三種狀態(tài)：正常、懸停和點擊。需求如下：
# 當鼠標移動到一個正常狀態(tài)下的按鈕之上時，它變?yōu)閼彝顟B(tài)。在鼠標離開之后，按鈕恢復為正常狀態(tài)。
# 在鼠標點擊一個按鈕時，按鈕變?yōu)辄c擊狀態(tài)。在其它按鈕被點擊之前，它將保留這一狀態(tài)。
# 如果一個按鈕被點擊，其它按鈕的狀態(tài)都不能為點擊狀態(tài)。其它按鈕只能為懸停狀態(tài)或正常狀態(tài)。
# 在同一時間只能有一個按鈕被點擊。
# 在同一時間只能有一個按鈕處于懸停狀態(tài)。
第一個任務是設置數組，用于保存菜單每個狀態(tài)的圖像。與這些數組元素對應的 ＜img＞ 也在 HTML 文檔正文（body）中創(chuàng)建，并順序地命名。請注意，數組值的索引是從0開始的，雖然對應的 ＜img＞ 元素的命名是從1開始的——這樣就需要在腳本后面的部分進行計算調整。
函數 preloadImage() 負責將所有的圖像存儲到緩存中，以使鼠標運動的響應時間最小。for() 循環(huán)用于迭代第一步創(chuàng)建的圖像，并在每次迭代中預載入一個圖像。
很多high-res圖像真的可以使 Web 站點更加整潔。但是它們也會使站點的訪問速度變慢——圖像是文件，文件使用帶寬，帶寬直接與等待時間相關。是該了解如何通過一個叫做圖像預載入（preloading）的技巧來提高 Web 站點的訪問速度的時候了。
圖像預載入
對于瀏覽器載入圖像來說，只有在對圖像發(fā)送一個 HTTP請求之后，它們才會被瀏覽器載入，對圖像的 HTTP 請求要么使用 ＜img＞ 標記，要么通過方法調用實現。如果使用 JavaScript 腳本來處理在 mouseover 事件時交換圖像，或者在一段時間之后自動更改圖像，那么在從服務器獲取圖像時可能要等上幾秒鐘到幾分鐘的時間。如果使用一個慢速的 Internet 連接，或者要獲取的圖像非常大，或者其它一些情況，這種現象就特別明顯；這樣，延遲就造成你不能達到自己期望的效果。
一些瀏覽器采用一些措施來緩解這一問題，比如試圖通過在本地緩存中存儲圖像，從而使隨后對圖像的調用能夠立即被滿足；但是在圖像第一次被調用時依然會存在一些延遲。預載入是在需要圖像之前將其下載到緩存的一種方法。通過這一措施，當真正需要圖像時，它就可以被立即從緩存中取出，從而能夠立即顯示。
Image() 對象
預載入圖像最簡單的方法是在 JavaScript 中實例化一個新 Image() 對象，然后將需要載入的圖像的 URL 作為參數傳入。假設我們有一個圖像叫做heavyimagefile.jpg，在用戶的鼠標放到一個已經顯示的圖像之上時，我們希望顯示這個圖像。為了預載入這一圖像從而得到較快的響應時間，我們簡單地創(chuàng)建一個 Image() 對象 heavyImage，然后在 onLoad() 事件處理器中將其同時載入。
復制代碼 代碼如下:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
請注意，圖像標記本身不能處理 onMouseOver() 和 onMouseOut() 事件，這就是上例中<img> 標記被包含在一個<a> 標記之中的原因，<a> 標記支持這兩個事件類型。
使用數組載入多個圖像
在實際應用中，我們可能需要預載入多個圖像，而不止一個；例如，在一個包含多個圖像翻卷的菜單欄中，或者在我們試圖創(chuàng)建平滑效果時，都需要預載入多個圖像。其實這并不困難，只要使用 JavaScript 的數組即可實現，如下例所示：
復制代碼 代碼如下:
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i )
{
imageObj.src=images[i];
}
}
</script>
在上面的例子中，我們定義一個變量 i和一個 Image() 對象 imageObj。然后定義了一個新數組 images[]，每個數組元素存儲要被預載入的圖像。最后，創(chuàng)建一個 for() 循環(huán)來處理整個數組，并將每個元素賦給 Image() 對象，這樣將其載入到緩存中。
onLoad() 事件處理器
像很多 JavaScript 的其它對象一樣，Image() 對象也有一些事件處理器。其中最有用的一個肯定是 onLoad() 處理器，它在圖像完全載入之后調用。這個事件處理器可以與一個自定義函數聯(lián)系起來，以在圖像完全載入之后執(zhí)行一些特定的任務。下面的例子說明了這一點，在這個例子中，首先在圖像載入時顯示一個“please wait”屏幕，然后在載入完成時將瀏覽器轉到一個新的 URL。
復制代碼 代碼如下:
<html>
<head>
<script language="JavaScript">
// create an image object
objImage = new Image();
// set what happens once the image has loaded objImage.onLoad=imagesLoaded();
// preload the image file
objImage.src='images/image1n.gif';
// function invoked on image load
function imagesLoaded()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
當然，你還可以創(chuàng)建一個圖像數組然后在其上進行循環(huán)操作，預載入每個圖像，然后在每一階段跟蹤被載入圖像的數目。一旦所有圖像載入完畢，根據事件處理器的程序邏輯，它就可以將瀏覽器帶入下一個頁面（或者執(zhí)行其它任務）。
預載入和多狀態(tài)菜單
現在，如何在實際應用程序中使用所有你學到的理論？下面的這段代碼是我最近偶爾編寫的一個菜單欄，這個菜單欄由一些按鈕（圖像鏈接）組成，每個按鈕具有三種狀態(tài)：正常、懸停和點擊。因為按鈕具有多種狀態(tài)，所以很有必要使用圖像預載入，以保證菜單的狀態(tài)能夠快速地反應。清單A中的代碼說明了實現方法。
清單A 中的HTML 代碼設置了一個由四個按鈕組成的菜單，每個按鈕具有三種狀態(tài)：正常、懸停和點擊。需求如下：
# 當鼠標移動到一個正常狀態(tài)下的按鈕之上時，它變?yōu)閼彝顟B(tài)。在鼠標離開之后，按鈕恢復為正常狀態(tài)。
# 在鼠標點擊一個按鈕時，按鈕變?yōu)辄c擊狀態(tài)。在其它按鈕被點擊之前，它將保留這一狀態(tài)。
# 如果一個按鈕被點擊，其它按鈕的狀態(tài)都不能為點擊狀態(tài)。其它按鈕只能為懸停狀態(tài)或正常狀態(tài)。
# 在同一時間只能有一個按鈕被點擊。
# 在同一時間只能有一個按鈕處于懸停狀態(tài)。
第一個任務是設置數組，用于保存菜單每個狀態(tài)的圖像。與這些數組元素對應的 ＜img＞ 也在 HTML 文檔正文（body）中創(chuàng)建，并順序地命名。請注意，數組值的索引是從0開始的，雖然對應的 ＜img＞ 元素的命名是從1開始的——這樣就需要在腳本后面的部分進行計算調整。
函數 preloadImage() 負責將所有的圖像存儲到緩存中，以使鼠標運動的響應時間最小。for() 循環(huán)用于迭代第一步創(chuàng)建的圖像，并在每次迭代中預載入一個圖像。
相關文章
這篇文章主要介紹了JavaScript設置表單上傳時文件個數的方法,可實現動態(tài)增加及刪除表單上傳按鈕的功能,非常簡單實用,需要的朋友可以參考下2015-08-08
已知微信小程序中如果要做到全局狀態(tài)共享，常用的有四種方式，分別是globalData、本地緩存、mobx-miniprogram和westore，本文將帶大家看看mobx-miniprogram是如何實現的小程序的全局狀態(tài)管理，需要的可以收藏一下2023-06-06
這篇文章主要介紹了CocosCreator實現技能冷卻效果，同學們可以跟著教程，親手試一下，代碼都是可以復用的
2021-04-04 
條件判斷語句是程序開發(fā)過程中一種經常使用的語句形式,和大部分編程語言相同,JavaScript 中也有條件判斷語句,這篇文章主要給大家介紹了關于如何讓js中的if判斷如絲般順滑的相關資料,需要的朋友可以參考下
2021-10-10 
這篇文章主要為大家詳細介紹了p5.js臨摹旋轉愛心，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10 
這篇文章主要介紹了JavaScript cookie原理及使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05 
這篇文章主要介紹了HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11 
過濾數組重復元素
2010-09-09 
這篇文章主要給大家介紹了關于JavaScript如何正確的寫代碼注釋的相關資料,注釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的JavaScript代碼,注釋的內容不會在網頁中顯示,需要的朋友可以參考下
2023-10-10