jQuery画像の読み込みに失敗しました。標準の画像を置き換える方法のまとめ

3248 ワード

jquery 画像読み込み

ここでは主にページの画像の読み込みに失敗した後、デフォルトの画像を置換するいくつかの方法について説明します。
ポイントが来ました。必ずerror事件が泡を立てないように覚えてください。
関連する知識点：jqueryのready方法、$error（）.imgのcomplete属性、プラグインimags Loaded、イベント依頼、イベントキャプチャと画像プリロードの方法など。
1.画像の読み込みに失敗しました。標準の画像に置換します。
1.1写真へのバインディングerrorイベント
画像のロードに失敗した場合、errorイベントが発生します。

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

事件の属性を提案していません。分かります。O.o

ダイナミックに追加された画像であれば、このイベントを再結合する必要があります。clickイベントなどはイベント依頼の方式を利用することができますが、イベント依頼はイベントの泡が発生するという考えを利用して行われます。一方、errorイベントは発泡

をサポートしていません。

は、ready方法においてerrorイベントをバインディングすることを勧めず、ピクチャのロードに失敗した場合、errorイベントをバインディングしていないため、デフォルトのピクチャに置き換えられないことになる。
1.2 complette属性を利用して判断する
画像のロードに失敗した時、complette属性値はfalseで、ロードに成功した時trueです。

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

動的に追加されたピクチャであれば、または再判断される

。

は、一時後に判断してもいいです。でないと、写真が追加されたばかりです。画像リソースはまだ要求されていないかもしれません。この方法で判断すれば問題があると思います。

HTML 5には、2つの画像の幅と高さを判断するための属性が追加されており、それぞれnature WidthとnarralHeight属性（画像をクライアントブラウザに完全にダウンロードしなければ判断できない）

である。

sのオンレディステージという属性は議論されません。ブラウザの違いがあります。

1.3 errorイベントキャプチャを利用して処理する（グローバル判定、動的追加の要素も−最適解）

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

動的に発生したタブを傍受することができます。
1.4プラグインimags Loadedが提供する方法を利用して処理する
imags Loadedは主に携帯端末の滝の流れで画像をロードします。画像のロード失敗を処理して標準の画像に置き換えることもできます。

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

動的に添付された写真なら、また判断します。
2.画像のプリロードの方法


//        ，        ，             
function preloadimages(arr) {
  var newimages = [];
  var arr = (typeof arr != "object") ? [arr] : arr; //         
  for (var i = 0,len = arr.length; i < len; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
  }
}

締め括りをつける
以上は小编でご绍介したjQuery画像のローディングに失败しました。デフォルトの画像方法のまとめを変えます。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

React NativeのFlat List使用及びピット包装まとめ

AndroidはTextView属性に基づいて、Android：ellipsizeで走馬灯効果を実現する方法です。