js 實現圖片預先載入(js操作 Image對象屬性complete ，事件onload 非同步載入圖片)

看個例子：
複製代碼 代碼如下:
<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>

當包含上述代碼的頁面開啟時並不載入 “tt.jpg” ，當點擊按鈕時候才載入。當載入完成後觸發onload事件顯示到頁面上。如果你是第一次載入 “tt.jpg" 這張圖片的話，運行正常。點擊按鈕載入並顯示一張圖片，如果重複點擊會怎麼樣呢？
IE、Opera中，除了第一次載入 圖片時候顯示正常，之後再點擊就沒有反應了，重新整理也一樣。難道它們只觸發一次 ”onload“ 事件？是緩衝機制？
FF、Chrom中，每點擊一次載入一張該圖片。

稍微修改下：
複製代碼 代碼如下:
<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

運行後發現，奇怪的事情發生了。所有的瀏覽器都一致了，都是每點擊一次載入一張圖片。這又是什麼原因？由此可以見 IE、Opera 執行過程中並不是只觸發一次 onload 事件！

聯想一下 Image 對象的一些屬性看看，complete、readyState(IE專屬值[uninitialized,complete]) （為防止緩衝影響效果請更換圖片名稱！）
複製代碼 代碼如下:
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

經過以上測試，可以看出一些不同點，對於 complete 屬性來講，IE是根據圖片是否顯示過來判斷，就是說當載入的圖片顯示出來後，complete 屬性的值才為 true ，否則一直是 false ，和以前是否載入過該張圖片沒有關係，即和緩衝沒有關係！但是其它瀏覽器表現出來的確不一樣，只要以前載入過該圖，瀏覽器有緩衝，complete 就為 true ，這和IE的 readyState 屬性的表現一致！
至此，可以肯定的是所有的瀏覽器都會緩衝圖片！可是上面的問題到底是什麼原因導致的呢？
眾所周知，從緩衝裡載入東西的速度是很快的，那麼在
...
Img.src = isrc;
Img.onload = ...
...
的過程中，難道 IE、Opera 載入的速度快到，來不及追加事件？

這回載入一張根本不存在的圖片看看效果：
複製代碼 代碼如下:
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>

可以肯定的是所有瀏覽器都不觸發 onload 事件。從是否緩衝或已經載入過圖片的角度講，IE、Opera表現正常，complete 始終為 false ；IE的 readyState 始終為uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的時候 Imgttmt.complete 值為 false。而之後 Imgttmt.complete 值就一直為 true 了！如果換一張從來沒有載入過的圖片，FF和Chrom 的行為就一致了，都是一開始載入時， Imgttmt.complete 值為false， 之後為 true！
測試的過程中還發現，指令碼的執行順序的確會影響到類似於 onload 等事件的追加，如果在其顯示後在追加事件就沒有什麼實際意義了！基於 javascript 這種解釋性語言的特性，在追加事件的時候一定要注意把事件追加在觸發該事件的控制代碼之前。