對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2011/6/13 3:20:21
JavaScript Image()對像屬性方法事件以及預裝載圖片
時間:2010-06-29
文章來源:網絡
在做一些tips效果，或者是一些圖片瀏覽效果時，圖片開始是隱藏的，當用戶進行一定的操作時，圖片會根據需要顯示出來。但圖片文件都相對比較大，如果一下子都顯示出來，很耗時間和流量，如果都不顯示，等觸發一定事件時再加載，用戶體驗又不太好，增加用戶的等待時間。
權衡一下利弊，可以有選擇的利用JavaScript預加載一些需要的圖片，先將其裝入DOM，等到需要的時候，直接調用，省掉等待的時間，直接顯示出來。 JavaScript裡的Image對象可以很好的實現這一需求，在FF下通過alert(img對像)可以看到「object HTMLImageElement「內容，Image對象可以直接利用append添加到body裡面去，調用十分方便。
圖像對像：
網頁中的圖像均會被自動看作圖像對象，並依順序，分別表示為document.images[0]，document.images[1]...
建立圖像對像：
格式：
圖像對像名稱=new Image([寬度],[高度])
圖像對象的屬性：
border complete height hspace lowsrc name src vspace width
圖像對象的事件：
onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src屬性一定要寫到onload的後面，否則程序在IE中會出錯。
參考代碼：
運行上面的代碼後，在不同的瀏覽器中進行測試，發現IE和FF是有區別的，在FF中，img對象的加載包含在body的加載過程中，既是img加載完之後，body才算是加載完畢，觸發window.onload事件。
在IE中，img對象的加載是不包含在body的加載過程之中的，body加載完畢，window.onload事件觸發時，img對象可能還未加載結束，img.onload事件會在window.onload之後觸發。
根據上面的問題，考慮到瀏覽器的兼容性和網頁的加載時間，盡量不要在Image對像裡放置過多的圖片，否則在FF下會影響網頁的下載速度。當然如果你在window.onload之後，執行預加載函數，就不會FF中的問題了。
示例：
大量採用高解析度的圖像的確可以讓一個Web站點容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要佔用帶寬，而帶寬直接同訪問等待時間相關。現在，讓我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度。
一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時。預裝載就是一種在需要圖片之前就將圖片下載到緩存的技術。採用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來並立即顯示。
Image()對像
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象，然後將希望預裝載的圖片URL傳遞給此對象。假設我們擁有一個名為heavyimagefile.jpg的圖片文件，我們希望當用戶鼠標指針移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進行預裝載，我們簡單的創建了一個名為heavyImage的新Image() 對象，然後將其通過onLoad()事件句柄同步裝載到頁面上。
注意，圖片的標籤（tag）本身並不處理onMouseOver()以及onMouseOut()事件，這也正是上面示例中的<img>標籤被包括在<a>標籤中的原因。標籤<a>則包括了對這些事件類型的支持。
通過數組（arrays）裝載多個圖片
在實際情況中，你很有可能需要預裝載不止一張的圖片；比如，對於包括多個圖片的菜單條，或者希望實現平滑的動畫效果。要實現這些並不困難，只需要利用JavaScript的數組，如下例所示：
在上面的例子中，定義了變量i以及名為imageObj的Image()對象。然後定義了新數組images[]，每一個數組元素將存儲需要預裝載圖片的地址來源。最後，使用一個for()循環來遍歷整個數組，並對每個元素指定Image()對象，以此將圖片都預裝載到緩存中。
Next page
Preloading and the JavaScript Image() object
onLoad()事件句柄（event handler）
同JavaScript中的許多其他對像一樣，Image()對像同樣有許多事件句柄。毫無疑問，其中最有用的是onLoad()句柄，它在圖片完全裝載時被調用。在圖片完全裝載之後，可以通過自定義函數來調用此句柄完成特定的功能。下例就給出了採用這樣的方法實現如下動作的代碼：當裝載圖片時顯示「please wait」屏幕，然後一旦完成裝載，就把瀏覽器引導到一個新的URL。
當然，你也可以創建一個圖片數組，然後循環，對每個元素進行預裝載，然後跟蹤每個階段所裝載的圖片數量。一旦所有的圖片都被裝載，可以對事件句柄編程，以將瀏覽器帶入下一個階段（或完成其他的任務）。
預裝載和多狀態（Multi-State）菜單
現在，如何將剛剛學習到的所有理論知識應用到實際的應用程序中？下面是一段我最近編寫的代碼 ——一個包括按鈕（圖片鏈接）的菜單條，每一個按鈕都可能處於三種狀態中的一種：正常、鼠標懸浮和單擊。由於按鈕具有多種狀態，所以必須使用圖片預裝載來確保菜單能足夠快的對狀態改變進行響應。列表A中的代碼顯示了如何實現此功能：
列表A中的HTML代碼建立了一個包括四個按鈕的菜單條，每一個按鈕都有三種狀態：正常、鼠標懸浮和單擊。觸發條件如下：
鼠標指針移動到處於正常狀態的按鈕，按鈕則變為鼠標懸浮狀態。鼠標移出按鈕區域之後，按鈕返回到正常狀態。
鼠標單擊按鈕，按鈕則變為單擊狀態。在另一按鈕被單擊之前，它將保持在此狀態。
如果單擊了某個按鈕，其他任何按鈕不能處於單擊狀態，只能是處於鼠標懸浮或正常狀態。
每次只能單擊一個按鈕。
每次只能有一個按鈕處於鼠標懸浮狀態。
首要任務是設置存儲菜單每種狀態圖片的數組。數組元素相應的元素<img>同樣在HTML文檔主體中創建，並且按照順序命名。請注意，數組值的索引序列是從0開始，而相應的<img>元素則從1開始命名——這就要求在腳本的後半段要對相應數值作運算調整。
函數preloadImages()負責將所有圖片裝載到緩存中，因此留給鼠標的響應時間就會很少。循環for()被用來在第一階段重複完成圖片創建操作，並隨後對每個圖片進行預裝載。
函數resetAll()是將所有圖片重置為正常狀態的非常方便的方法。這是必需的，因為當菜單上某個按鈕被單擊的時候，菜單上面其他所有按鈕在被單擊按鈕改變狀態前必須恢復到正常狀態。
函數setNormal()、setHover()以及setClick()負責將特定圖像（圖像編號將作為函數參數傳遞）的圖片源改變為相應正常、鼠標懸浮或單擊狀態的圖片源。由於被單擊的圖像在另一圖像被單擊之前必須保持狀態（參考規則#2），因此被單擊圖片將暫不接受鼠標動作。函數 setNormal()以及setHover()代碼僅完成圖片不在單擊狀態的情況下改變圖片狀態的動作。
以上只是通過使用預裝載技術加速JavaScript效果響應多種辦法中的一種。在站點中可以使用以上技術，並且根據實際情況進行調整。祝一切順利！
原文出處：JavaScript Image()对象属性方法事件以及预装载图片 | JavaScript教程 - 下午茶 - css_javascript_jquery_photoshop_网页前端设计
時間:2010-06-29
文章來源:網絡
在做一些tips效果，或者是一些圖片瀏覽效果時，圖片開始是隱藏的，當用戶進行一定的操作時，圖片會根據需要顯示出來。但圖片文件都相對比較大，如果一下子都顯示出來，很耗時間和流量，如果都不顯示，等觸發一定事件時再加載，用戶體驗又不太好，增加用戶的等待時間。
權衡一下利弊，可以有選擇的利用JavaScript預加載一些需要的圖片，先將其裝入DOM，等到需要的時候，直接調用，省掉等待的時間，直接顯示出來。 JavaScript裡的Image對象可以很好的實現這一需求，在FF下通過alert(img對像)可以看到「object HTMLImageElement「內容，Image對象可以直接利用append添加到body裡面去，調用十分方便。
圖像對像：
網頁中的圖像均會被自動看作圖像對象，並依順序，分別表示為document.images[0]，document.images[1]...
建立圖像對像：
格式：
圖像對像名稱=new Image([寬度],[高度])
圖像對象的屬性：
border complete height hspace lowsrc name src vspace width
圖像對象的事件：
onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src屬性一定要寫到onload的後面，否則程序在IE中會出錯。
參考代碼：
var img=new Image();
img.onload=function(){alert("img is loaded")};
img.onerror=function(){alert("error!")};
img.src="http://i2.cdn.turner.com/cnn/video/tech/2009/02/07/levs.ship.treasure.cnn.88x49.jpg";
function show(){alert("body is loaded");};
window.onload=show;
運行上面的代碼後，在不同的瀏覽器中進行測試，發現IE和FF是有區別的，在FF中，img對象的加載包含在body的加載過程中，既是img加載完之後，body才算是加載完畢，觸發window.onload事件。
在IE中，img對象的加載是不包含在body的加載過程之中的，body加載完畢，window.onload事件觸發時，img對象可能還未加載結束，img.onload事件會在window.onload之後觸發。
根據上面的問題，考慮到瀏覽器的兼容性和網頁的加載時間，盡量不要在Image對像裡放置過多的圖片，否則在FF下會影響網頁的下載速度。當然如果你在window.onload之後，執行預加載函數，就不會FF中的問題了。
示例：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
div{border:#aaaaaa 3px solid;width:200px;padding:2px;margin:2px 9px;font-size:12px;
line-height:22px;color:#999999;}
.ipt1{width:160px;font-size:12px;color:#1F6478;border:#999999 1px solid;margin-left:9px;}
.ipt2{border:#999999 1px solid;margin-left:6px;color:#666666}
p{margin:0px;padding:0px;background-image:url(http://www.ipmtea.net/attachments/month_0809/v2008925193118.gif);
background-position:center;background-repeat:no-repeat;width:200px;height:200px;
text-align:center;font-size:12px;color:#999999;line-height:26px;}
</style>
<script language="javascript" type="text/javascript">
function preloadimg(url,obj,ipt){
var img=new Image();
obj.innerHTML="<p>圖片加載中...</p>";
img.onload=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";
ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};
img.onerror=function(){obj.innerHTML="圖片加載錯誤，請檢查網絡或URL地址！"};
img.src=url; //img.src一定要寫在img.onload之後，否則在IE中會出現問題
}
function show(){
var div=document.getElementsByTagName("div")[0];
var input=document.getElementsByTagName("input");
preloadimg("http://book.csdn.net/smallimg/csdbblo2.gif",div,input[0]);
input[0].onclick=function(){this.value=""};
input[1].onclick=function(){preloadimg(input[0].value,div,input[0]);}
}
window.onload=show;
</script>
<title>JavaScript獲取圖片大小——www.ipmtea.net</title>
</head>
<body>
<div></div>
<br />
<input type="text" value="請輸入圖片URL地址" class="ipt1"/>
<input type="button" value="加載" class="ipt2"/>
</body>
</html>
大量採用高解析度的圖像的確可以讓一個Web站點容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要佔用帶寬，而帶寬直接同訪問等待時間相關。現在，讓我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度。
一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時。預裝載就是一種在需要圖片之前就將圖片下載到緩存的技術。採用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來並立即顯示。
Image()對像
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象，然後將希望預裝載的圖片URL傳遞給此對象。假設我們擁有一個名為heavyimagefile.jpg的圖片文件，我們希望當用戶鼠標指針移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進行預裝載，我們簡單的創建了一個名為heavyImage的新Image() 對象，然後將其通過onLoad()事件句柄同步裝載到頁面上。
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="(script removed)preloader()">
<a href="#" onMouseOver="(script removed)document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
注意，圖片的標籤（tag）本身並不處理onMouseOver()以及onMouseOut()事件，這也正是上面示例中的<img>標籤被包括在<a>標籤中的原因。標籤<a>則包括了對這些事件類型的支持。
通過數組（arrays）裝載多個圖片
在實際情況中，你很有可能需要預裝載不止一張的圖片；比如，對於包括多個圖片的菜單條，或者希望實現平滑的動畫效果。要實現這些並不困難，只需要利用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以及名為imageObj的Image()對象。然後定義了新數組images[]，每一個數組元素將存儲需要預裝載圖片的地址來源。最後，使用一個for()循環來遍歷整個數組，並對每個元素指定Image()對象，以此將圖片都預裝載到緩存中。
Next page
Preloading and the JavaScript Image() object
onLoad()事件句柄（event handler）
同JavaScript中的許多其他對像一樣，Image()對像同樣有許多事件句柄。毫無疑問，其中最有用的是onLoad()句柄，它在圖片完全裝載時被調用。在圖片完全裝載之後，可以通過自定義函數來調用此句柄完成特定的功能。下例就給出了採用這樣的方法實現如下動作的代碼：當裝載圖片時顯示「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>
當然，你也可以創建一個圖片數組，然後循環，對每個元素進行預裝載，然後跟蹤每個階段所裝載的圖片數量。一旦所有的圖片都被裝載，可以對事件句柄編程，以將瀏覽器帶入下一個階段（或完成其他的任務）。
預裝載和多狀態（Multi-State）菜單
現在，如何將剛剛學習到的所有理論知識應用到實際的應用程序中？下面是一段我最近編寫的代碼 ——一個包括按鈕（圖片鏈接）的菜單條，每一個按鈕都可能處於三種狀態中的一種：正常、鼠標懸浮和單擊。由於按鈕具有多種狀態，所以必須使用圖片預裝載來確保菜單能足夠快的對狀態改變進行響應。列表A中的代碼顯示了如何實現此功能：
列表A中的HTML代碼建立了一個包括四個按鈕的菜單條，每一個按鈕都有三種狀態：正常、鼠標懸浮和單擊。觸發條件如下：
鼠標指針移動到處於正常狀態的按鈕，按鈕則變為鼠標懸浮狀態。鼠標移出按鈕區域之後，按鈕返回到正常狀態。
鼠標單擊按鈕，按鈕則變為單擊狀態。在另一按鈕被單擊之前，它將保持在此狀態。
如果單擊了某個按鈕，其他任何按鈕不能處於單擊狀態，只能是處於鼠標懸浮或正常狀態。
每次只能單擊一個按鈕。
每次只能有一個按鈕處於鼠標懸浮狀態。
首要任務是設置存儲菜單每種狀態圖片的數組。數組元素相應的元素<img>同樣在HTML文檔主體中創建，並且按照順序命名。請注意，數組值的索引序列是從0開始，而相應的<img>元素則從1開始命名——這就要求在腳本的後半段要對相應數值作運算調整。
函數preloadImages()負責將所有圖片裝載到緩存中，因此留給鼠標的響應時間就會很少。循環for()被用來在第一階段重複完成圖片創建操作，並隨後對每個圖片進行預裝載。
函數resetAll()是將所有圖片重置為正常狀態的非常方便的方法。這是必需的，因為當菜單上某個按鈕被單擊的時候，菜單上面其他所有按鈕在被單擊按鈕改變狀態前必須恢復到正常狀態。
函數setNormal()、setHover()以及setClick()負責將特定圖像（圖像編號將作為函數參數傳遞）的圖片源改變為相應正常、鼠標懸浮或單擊狀態的圖片源。由於被單擊的圖像在另一圖像被單擊之前必須保持狀態（參考規則#2），因此被單擊圖片將暫不接受鼠標動作。函數 setNormal()以及setHover()代碼僅完成圖片不在單擊狀態的情況下改變圖片狀態的動作。
以上只是通過使用預裝載技術加速JavaScript效果響應多種辦法中的一種。在站點中可以使用以上技術，並且根據實際情況進行調整。祝一切順利！
原文出處：JavaScript Image()对象属性方法事件以及预装载图片 | JavaScript教程 - 下午茶 - css_javascript_jquery_photoshop_网页前端设计