IE ブラウザーの無効な画像オンロード イベントの解決策_JavaScript スキル

ストーリー モードの実装では、現在閲覧している写真とその下の 2 枚の写真のみが読み込まれ、写真が読み込まれる前に、1 ピクセルの写真が使用されます。ローディング クラスはローディング背景画像を表示し、画像が視覚領域にあると判断されると実際の画像に置き換えます。画像が正常にロードされた後、ローディング クラスは削除されます。

問題は最後にあり、IE ではロード中のクラスを削除できないことが判明しました。その時のコードは次のとおりでした。 > コードをコピーします

コードは次のとおりです:img.src = _src;img.src = _src;img.onload = function(){

_con.delClass('loading') ;

}

オンラインで検索したところ、IE から画像を取得する onload と src を定義するステートメントの順序を変更する必要があることがわかりました。キャッシュとオンロードはまったくトリガーされません。Opera にもこの問題があります。正しいコードの変更は次のとおりです。

コードをコピーします。

は次のとおりです:img.onload = function(){ _con.delClass('loading');};

img.src = _src;

すぐに正常になります


結論: onload は src の前に記述し、最初に画像が読み込まれた後に何をするかをブラウザーに指示し、次に画像を読み込ませる必要があります。 したがって、IE ブラウザが onload イベントをトリガーしないのではなく、読み込みバッファの速度が速すぎるため、読み込み後に何をするかを指示せずに読み込みが完了してしまいます。一方、Firefox は明らかに賢くなっています。onload イベントを追加すると、Firefox ブラウザはバッファにこの画像が既に存在するかどうかを検出し、存在する場合はこのイベントを直接トリガーします。