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);

If動的に追加された画像なので、再度判断する必要があります

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);
    });

関連推奨:

非同期画像アップロード方法のJavaScript実装例

JS切り替え画像スライドショー切り替え効果

jsでランダム切り替えの背景画像を設定する方法

以上がjQuery イメージの読み込みが失敗する、デフォルトのイメージを置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。