이미지에 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"; 

자바 스크립트는 대소 문자를 구분하므로 모든 개체 속성에 대소 문자를 사용해야합니다. 당신은 단지 하나의 이벤트 핸들러를 사용하는 경우

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

당신은 때로 믿을 수 :

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

또는 (IE의 이전 버전을) : .onload 외에

---

대안은 사용할 수 있습니다 이미 이벤트 처리기를 추상화 한 교차 플랫폼 라이브러리를 사용하면 .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의 콘솔에서 나를 위해 작동합니다. 당신이 jQuery를 사용할 수있는 경우

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

그것은 간단 할 수있다 :

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

또는 바닐라 자바 ​​스크립트 :

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

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 나 오페라

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!"); 
});