画像のonLoadへの代替を探してい

Question

可能性の重複：
jQuery or JavaScript: Determine when image finished loading

問題が知られているが、私は任意の簡単な解決策を見つけることができません。

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イベントの実装を探していましたが、何も見つかりませんでした。助けてくれませんか？

Answer 1

にイベントハンドラプロパティの適切なスペルはすべて小文字.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) {...}); 

あなたが唯一のイベントハンドラを使用していて、あなたが上がらない場合すでにイベントハンドラを抽象化しているクロスプラットフォームライブラリを使用している場合は、.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)); 
     }); 
    } 
} 

Answer 2

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

Answer 3

あなたはjQueryのを使用できる場合、それは単純なことができます：

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

それともバニラとのjavascript：

img.onload = img.onerror = foo; 

Answer 4

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

クロム、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); 

Answer 5

var img = new Image(); 

//blah blah... 

img.addEventListener("load",function() { 
    console.log("Loaded!"); 
});