6

画像が正常に読み込まれたかどうかを確認することを目指しています。最近のブラウザではうまく機能していますが、IE8または7はひどい問題です。サンプルコードは次のとおりです。

var img = new Image(),
    url = 'http://something.com/images/something.gif';

    $(img).attr('src', url).load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } 
        else {
            alert('successfully loaded');
        }
    }

誰かがこの問題を回避するためのアイデアを持っていますか？よろしくお願いします！

4

3 に答える 3

13

onload値を設定する前にハンドラを設定する必要があります.src。

.srcIE の一部のバージョンでは、画像がブラウザのキャッシュにある場合、値が設定されるとすぐに load イベントが発生します。ロード ハンドラーがまだ配置されていない場合は、そのイベントを見逃すことになります。

また、naturalWidthとnaturalHeightは古いバージョンの IE ではサポートされていないため、常に未定義です。また、エラー状態をキャッチするには、onerrorとを使用する必要があります。onabort

これには jQuery を使用する必要はありません。これを行うことができます：

var img = new Image(),

img.onload = function() {
    alert("loaded successfully");
}
img.onerror = img.onabort = function() {
    alert("broken image");
}
// only set .src AFTER event handlers are in place
img.src = 'http://something.com/images/something.gif';
于 2012-08-17T05:12:29.530 に答える
3

画像が壊れている場合、onloadイベントは発生しませんが、代わりにonerrorイベントが発生します。したがって、次のようにする必要があります。

var img = new Image(),
url = 'http://something.com/images/something.gif';

img.onload = function() {
  alert('successfully loaded');
};

img.onerror = function() {
  alert('broken image!');
};

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

またはjQueryで：

$(img).load(function() {
  alert('successfully loaded');
}).error(function() {
  alert('broken image!');
}).attr('src', url);
于 2012-08-17T05:07:18.130 に答える
1 
var url="http://something.com/images/something.gif",
    img=new Image;
img.onload=img.onerror=function(ev){
  if(ev.type=="load")alert("successfully loaded");
  else if(ev.type=="error")alert("error loading");
}
img.src=url;
// If image is cached then no `onload` or `onerror` can occur.
if(img.complete){
  alert("successfully loaded");
  img.onload=img.onerror=null;
}
于 2012-08-17T05:15:45.787 に答える