プリロードされた画像のプログレスバーのオンロードの問題

Question

複数の画像のロード中にプログレスバーを設定し、動作させることができませんでした。彼らはすぐにイメージが完全にまだロードされていないにもかかわらず、moveProgressBar（）関数を実行しているので、変な

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; 

何かが起こっている：私は次のようにプリロードされている複数の画像を持っています。これは、キャッシュとキャッシュを使用してページに近づいても発生します。何か不足していますか？どんな助けもありがとう。

Answer 1

イメージのjs onloadイベントは、大混乱です。異なるブラウザでは異なる方法で処理され、異なるバージョン（主にIE）では異なるブラウザで処理されます。さらに、ほとんどのブラウザには不具合があります。ここで

は短いチェックリストです：あなたは、SRCを設定する前に

1. はあなたのonloadを設定します。 （それを待って、それは奇妙になる...）
2. ハンドルのエラーにも。
3. 既にキャッシュされたイメージを処理します。時々彼らは積み込みをしないでしょうし、他の時間にはそれらは即座に発射して行います。
4. 一般的なbelt-and-suspendersのsetTimeout（） - イメージがDOM内の幅または高さを取得したかどうかをポーリングする関数を使用します。これはさまざまなブラウザ/バージョンで異なる方法で行われます。つまり、naturalWidthで始まり、次にimage.widthより前のgetAttribute（width）に移動して機能検出を使用する必要があります。

あなたはまだいくつかのバグを残していますが、サポートしたいすべてのブラウザ/バージョンをテストすればわかります。

Answer 2

参考のために、ノアが各機能を呼び出してその結果をオンロードに割り当てていたというエラーがありました。それはされている必要があります：

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