2

重複の可能性:
jQuery または JavaScript: 画像の読み込みがいつ終了したかを判断する

問題はわかっていますが、簡単な解決策が見つかりません。

var img = new Image();

img.onLoad = function() {
  console.log("load");         // this event doesn't fire
};

img.src = "img/domino/21.png";

console.log(img.complete);     // false

setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

onComplete イベントの実装を探していましたが、何も見つかりません。手伝いましょうか？

4

5 に答える 5

7

イベント ハンドラー プロパティの正しいスペルは、.onloadではなく、すべて小文字.onLoadです。

var img = new Image();

img.onload = function() {
  console.log("load");         // works every time
};

img.src = "img/domino/21.png";

Javascript では大文字と小文字が区別されるため、すべてのオブジェクト プロパティに適切な大文字と小文字を使用する必要があります。

その他の代替手段は、.onload次を使用することです。

img.addEventListener("load", function(e) {...});

または (古いバージョンの IE の場合):

img.attachEvent("onload", function(e) {...});

イベント ハンドラーを 1 つしか使用しておらず、既にイベント ハンドラーを抽象化したクロス プラットフォーム ライブラリを使用していない場合は、使用する.onloadのが最も簡単です。

そして、イベント ハンドラーを追加する簡単なクロス ブラウザーの方法を次に示します。

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}
于 2012-05-11T00:20:36.170 に答える
5 
var img = new Image();
img.onload = function() {
    console.log("load");
};
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

Chrome、Firefox、Safari の場合

var img = new Image();
img.addEventListener('load',function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

またはIEまたはOperaで

var img = new Image();
img.attachEvent('onload',function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);
于 2012-05-11T00:16:58.217 に答える
1

の画像がimg/domino/21.png存在しますか? 次のコードは、Firebugのコンソールで機能します。

var img = new Image();

var onload = function() {
    console.log('load');
}

img.onload = onload;

img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds();
于 2012-05-11T00:15:56.367 に答える
1

jQuery を使用できる場合は、次のように簡単に実行できます。

$('img').load(foo).error(foo);

またはバニラのJavaScriptで：

img.onload = img.onerror = foo;
于 2012-05-11T00:16:24.160 に答える
0 
var img = new Image();

//blah blah...

img.addEventListener("load",function() {
    console.log("Loaded!");
});
于 2012-05-11T00:21:53.710 に答える