1

コンソールでリソースの読み込みに180回失敗しました。画像のURLを使用してウェブマスターにレポートを送信できるように、これらのリソースのリストを取得する必要があります。これはどのように行うことができますか？

4

2 に答える 2

2

画像の読み込みを開始する前にイベントリスナーを設定している限り、読み込みに失敗した画像を簡単に追跡できます。このような：

img.addEventListener('error', function() {
  //report failed image
}, false);

すべての画像が<img>htmlにあるタグに読み込まれている場合は、スクリプトですべての画像のエラーイベントを設定できます。これを設定するスクリプトがimgタグの後に配置されていることを確認してください。ただし、ページ読み込みイベントで、またはDOMContentLoaded一部のエラーイベントを見逃した可能性があるため、設定を実行しないでください。手遅れになります。

この例を参照してください。

http://jsbin.com/ekiram/2/edit

必要に応じて、MutationObserver<img>イベントを設定して、動的に追加された新しい要素を監視し、そこでエラーイベントを設定できます。ただし、すべてのブラウザで機能するわけではありません。

プロパティを確認することで、画像が読み込まれたかどうかを確認できnaturalWidthます。0の場合、ロードされていません。ただし、画像の読み込みに実際に失敗したのか、ネットワーク接続が遅い場合のように非常に長い時間がかかっているのかを知る方法はありません。loadページイベントの後や、非常に長いタイムアウトを設定する場合など、ページとすべての画像の読み込みが実際に完了したかどうかを知る別の方法がある場合は、これを使用できると思います。

于 2013-01-27T13:54:36.383 に答える
1

ページにスクリプトを追加できる場合は、ハンドラーをerrorイベントにバインドして、すべての失敗を追跡できます。

$(function(){
  var errorImages = [];

  $('img').on('error', function(){
                errorImages.push(this.src);
              });

  $(window).on('load', function(){
    alert(errorImages);
  });
});

実例： http： //jsbin.com/iboyik/3

すでに読み込まれているページで失敗したすべての画像を取得する場合は、少し注意が必要です。私はすべての画像をリロードすることでそれを行うことができました：

(function(){
  var errorImages = [];
  $('img')
    .on('error', function(){
                    errorImages.push(this.src);
                 })
    .prop('src', function(i, src){return src;});
  // wait for all images to fail (bit of a hack)
  setTimeout(function(){alert(errorImages);}, 1000);
})();

実例： http： //jsbin.com/iboyik/2

于 2013-01-27T13:46:50.090 に答える