0

パラメータとして img src 値を取得する関数があります。やりたいことは、そのイメージが 200 ok または 404/その他のエラーで読み込まれるかどうかを確認することです。200 OK になった場合は、その src を使用して img タグを DOM に挿入します (チェック中にブラウザのキャッシュにも読み込まれ、その img タグを DOM に挿入すると、キャッシュから読み込まれると考えられます)。 . 次のように、コードの簡単なスニペットを試しました。

function checkImage(src)
{
   var img = new Image(),
   tag = '<img src="'+src+'" />',
   alt = '<span>sorry,image broken</span>';
   img.onload = function(){
       $('.some-container').html(tag);
   };
   img.onerror = function(){
      $('.some-container').html(alt);
   };
   img.src = src;
}

chrome では問題なく動作しましたが、firefox と ie では問題が発生しました (どちらも、画像が正常に読み込まれたか壊れたかに関係なく、エラー イベントのみを発生させています)。onload と onerror を使用する代わりに、次のような jquery を使用してみました。

$(img).load(...).error(...).attr('src',url);

$(img).on('load',...).on('error',...).attr('src',url);

$('<img />').load(...).error(...).attr('src',url);

$('<img />').on('load',...).on('error',...).attr('src',url);

さらに、desandro( https://github.com/desandro/imagesloaded )による jquery.imagesLoaded プラグインを試してみました:

$(img).imagesLoaded().done(...).fail(...);

$(img).imagesLoaded().progress(function(instance,image){
    image.isLoaded?alert('loaded'):alert('broken');
});

$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);

$('<img />').imagesLoaded().progress(function(instance,image){
    image.isLoaded?alert('loaded'):alert('broken');
});

私も次のソリューションを試しました：

画像読み込み時の jQuery コールバック (画像がキャッシュされている場合でも)

https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8

しかし、結局のところ、クロムでは機能しますが、FFやIEでは機能しません。メモリには存在するが「DOM」には存在しない画像を確認できる解決策はありますか? 前もって感謝します。

4

2 に答える 2

0

Image() javascript オブジェクトに関する w3schools のコメントをご覧ください。

http://www.w3schools.com/jsref/dom_obj_image.asp

onabort - 画像の読み込みが中断されました。W3C YES

onerror - イメージのロード中にエラーが発生しました。W3C YES

onload - 画像の読み込みが完了しました。W3C YES

Image() オブジェクトの完全なプロパティでもあり、ブラウザが画像の読み込みを終了したかどうかを判断します。残念ながら、この特定のプロパティは W3c ではありません

それが少し役立つことを願っています

PS: Google で少し検索した後、スタック オーバーフローからこの Q/A を見つけました。

クロスブラウザーの画像オンロード イベント処理

于 2013-08-19T06:38:12.173 に答える