6

OnLoad私のウェブページのハンドラーで、すべての画像が正しく読み込まれたかどうかを確認しようとしています。

すべてのタグを繰り返し処理し<img>て、関数でチェックしていisImageLoaded()ます。残念ながら、私の関数はバージョン8までのFirefoxとIEでのみ機能します。

IE 9および10で動作させる方法について何か提案はありますか？

function isImageLoaded(img) {
    // check for IE
    if (!img.complete) {
        return false;
    }
    // check for Firefox
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }
    // assume it's ok
    return true;
}

更新：主な原因は、すべてのイメージがIE9+によってロードされる前にOnLoadが起動される可能性があることです。ページ内の画像をチェックするためのより良いトリガーは何でしょうか？個々のOnLoad/OnErrorハンドラーではなく、一度にすべてをチェックしたいと思います。

4

1 に答える 1

1

私のウェブページのOnLoadハンドラーで、すべての画像が正しく読み込まれたかどうかを確認しようとしています。

私はあなたが使用していると思いますbody.onloadか<body onload="">？これは、すべての画像がすべて読み込まれることを意味しますが、次を使用します。

window.addEventListener('load', function(){
  /// everything in the page has loaded now
});

または、IEの古いバージョンの場合：

window.attachEvent('onload', function(){
  /// everything in the page has loaded now
});

ブラウザ間でより一貫した動作が得られます。window.onloadすべてがロードされたときにのみトリガーされるという事実を知っています（ただし、javascriptやcssなどの他のすべてのリソースが含まれます）。このリンクは興味深いかもしれません：

window.onload vs <body onload = "" />

onloadしたがって、イベントが発生した後に画像をページに挿入しない限り、上記は関数を少し冗長にする必要があります。ただし、処理を高速化し、すべてがダウンロードされるのを待つ必要がない場合は、dom readyリスナーを使用して、kennypuで説明されているメソッドを実装できます。

クロスブラウザDomReady

追加のメモとして、私が知る限り、image.completeすべての最新のブラウザで機能するはずです。

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

于 2013-03-20T08:31:31.740 に答える