jQueryでの画像読み込み失敗の問題

この記事では、jQueryの画像読み込みに失敗した際にデフォルトの画像を置き換える方法のまとめと、使用した関連知識を主に紹介します：jqueryのreadyメソッド、$("img").error()、imgのcomplete属性、プラグインimagesLoaded、イベント委任、イベント キャプチャと画像のプリロードの方法については、必要な友人が参照できるようにします

この記事では主に、ページで画像の読み込みが失敗した後にデフォルトの画像を置き換えるいくつかの方法について説明します

重要な点は次のとおりです:エラー イベントはバブルアップしないことに注意してください。

関連知識ポイント: jqueryのreadyメソッド、$("img").error()、imgのcomplete属性、プラグインimagesLoaded、イベント委任、イベントキャプチャおよび画像プリロードメソッドなど

1.読み込みに失敗した場合は、デフォルトの画像に置き換えます

1.1 エラー イベントを画像にバインドします

画像の読み込みに失敗すると、エラー イベントがトリガーされます

$("img").on("error", function () {
  $(this).attr("src", "../img/img.jpg");
});

• イベント属性 onerror は推奨されません。ご存知ですか~O.o

• 動的に追加された画像の場合は、このイベントを再バインドする必要があります。イベントデリゲーションはクリックイベントに使用できますが、イベントデリゲーションはイベントバブリングのアイデアに基づいており、エラーイベントはバブリングをサポートしていません

• readyメソッドでエラーイベントをimgにバインドすることはお勧めできません。 img が画像のロードに失敗した場合、img はエラー イベントをバインドしないため、デフォルトの画像は置き換えられなくなります

1.2 complete 属性を使用して画像のロードに失敗した場合、 complete 属性値は false です。画像が正常に読み込まれた場合、complete 属性値は true になります

動的に追加された画像の場合は、再判定が必要です

• しばらくすると、画像が追加されたばかりで、画像リソースがまだリクエストされていない可能性があるため、このように判断されます。問題があります

• HTML 5では、幅と高さを決定するために2つの新しい属性が追加されます画像の、naturalWidth 属性と NaturalHeight 属性 (決定するには、画像をクライアント ブラウザに完全にダウンロードする必要があります)

• Img の onreadystatechange 属性については説明しません

• 1.3 エラー イベント キャプチャを使用します。処理する(グローバルな判断、動的に追加される要素も可能 - 最適解)

$("img").each(function () {

  if (!this.complete || (typeof this.naturalWidth == "undefined" && this.naturalWidth == 0) || !this.src) {
    $(this).attr("src", "../img/img.jpg");
  }
});

は動的生成を監視できる imgタグ

1.4はプラグインimagesLoadedが提供するメソッドを使用して処理します

imagesLoadedが主に使用されます携帯電話でウォーターフォール フロー モードで画像をロードするために使用することもできます。画像のロード失敗を処理し、デフォルトの画像に置き換えることもできます

document.addEventListener("error", function (e) {

  var elem = e.target;
  if (elem.tagName.toLowerCase() == 'img') {
    elem.src = "../img/img.jpg";
  }
}, true);

動的であれば、追加された画像はまだ再判断する必要があります

2 . 写真をプリロードする方法

// 用的是jQuery的deferred来实现的
$('img').imagesLoaded()
    .always(function (instance) { // always事件，在所有图片都加载完成（成功与否不论）时触发
      console.log('all images loaded');
    })
    .done(function (instance) { // done事件，在所有图片都加载成功时触发
      console.log('all images successfully loaded');
    })
    .fail(function (instance) { // fail事件，在所有图片都加载完成，并且至少有一张图片加载失败时触发
      console.log('all images loaded, at least one is broken');
    })
    .progress(function (instance, image) { // progress事件，在每一张图片加载完成时都触发一次
      var result = image.isLoaded ? 'loaded' : 'broken'; // 判断当前图片加载成功与否
      image.img.src = image.isLoaded ? image.img.src : "../img/img.jpg";
      console.log('image is ' + result + ' for ' + image.img.src);
    });

以上、皆さんの参考になれば幸いです。 関連記事:

Webstormでbabelを使ってES6をES5に自動トランスコードする方法

Bootstrap4 + Vue2でページングクエリを実装する方法

vue2でkeep-aliveを使う方法

ありWebpackのjqueryプラグインの環境設定です(詳細なチュートリアル)

以上がjQueryでの画像読み込み失敗の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。