預加載圖像的進度條Onload問題

我想嘗試設置一個進度條，用於加載幾張圖片並且無法使其工作。我有預裝像一些圖片：預加載圖像的進度條Onload問題

var Image1 = new Image(); 
var Image2 = new Image(); 
var Image3 = new Image(); 

Image1.onload = moveProgressBar(); 
Image2.onload = moveProgressBar(); 
Image3.onload = moveProgressBar(); 

Image1.src = url; 
Image2.src = url; 
Image3.src = url;

奇怪的事情正在發生的事情，因爲他們會立即運行，即使圖像不完全加載尚moveProgressBar（）函數。即使在接近沒有緩存和緩存的頁面時也會發生這種情況。我錯過了什麼嗎？任何幫助，將不勝感激。

來源

2012-02-13 Ark-of-Ice

圖像上的js onload事件是一個很大的混亂。不同的瀏覽器以不同的方式處理它，不同的版本（主要是IE）處理它的方式不同。此外，大多數瀏覽器都有可疑錯誤。

這裏是一個簡短的清單：

設置你的onload之前設置的你的src。（等待它，它會變得更古怪......）
處理onerror以及。
處理已被高速緩存的圖像。有時候他們不會開火，而有時他們會開火，並且會立即開火。
使用一個通用的皮帶和吊帶setTimeout（） - 函數輪詢以查看圖像是否在DOM中獲得寬度或高度。這在不同的瀏覽器/版本中完成的方式不同，這意味着您必須使用以自然寬度開始的特徵檢測，然後在image.width之前移動到getAttribute（寬度）。

然後你仍然可能會有一些錯誤......但你只會知道，如果你測試你打算支持的所有瀏覽器/版本。

來源

2012-02-13 07:31:13

1）沒問題。 2）如果出現錯誤，我該怎麼辦？ 3）我如何處理它們以確保它們正確地調用onload？ 4）如果我能得到它們的高度和寬度，這意味着我的形象是正確的？如果找不到它們，我該怎麼辦？ – 2012-02-13 08:45:53

2）這取決於你的應用程序，但如果它是一個進度條，我認爲你想勾劃一個進步的進步，因爲你的進度否則將失去「99％」，因爲一個圖像丟失。 4）是的，如果你可以得到寬度或高度，並且它大於0，則加載圖像。如果它是0，它尚未加載。如果你無法獲得寬度，你有一個奇怪的瀏覽器。 – 2012-02-14 07:25:32

作爲參考，錯誤是諾亞正在調用每個函數並將結果分配給onload。它應該是：

Image1.onload = moveProgressBar; // note the lack of()

來源

2012-06-19 15:22:55 nathan

預加載圖像的進度條Onload問題

回答

相關問題