IE9, FireFox 브라우저에서 image의 onload 이벤트가 불리지 않음.

구글에서 검색해 보니 onload 이벤트 핸들러를 image.src = .. 구문 전에 넣어야 한다는 것은 알겠다. 

왜냐하면 cache에서 이미지를 가져오는 경우에는  image.src = .. 문장을 만나면 바로 이미지를 load 해 버리고,

onload 이벤트 핸들러 설정이 그 다음에 있다면, onload 이벤트 핸들러는 불리지 않을 것이다.

그런데 FireFox 에서는 onload 이벤트 핸들러 설정을 image.src = .. 문장 앞에 넣어도 불리지 않았다.

http://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache

http://stackoverflow.com/questions/15888487/image-onload-event-not-firing-in-firefox

http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached

그래서 해결책으로  jQuery.imagesLoaded 라이브러리를 권하는 사람들이 많았다.

https://github.com/desandro/imagesloaded

http://imagesloaded.desandro.com/

사용법은 간단하다.

<script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>

imagesLoaded( img, function() { } );

이렇게만 사용하면 된다.

이렇게 하니 FireFox 에서도 제대로 불렸다.

그런데 FireFox 브라우저는 onload 이벤트 핸들러에서 canvas의 context 에서 drawImage()를 호출할 때

NS_ERROR_NOT_AVAILABLE:  에러가 발생한다.

var ctx = canvas.getContext('2d');

// FireFox 에서는 NS_ERROR_NOT_AVAILABLE:  에러가 발생한다.

// [참고] https://bugzilla.mozilla.org/show_bug.cgi?id=574330

ctx.drawImage(img, 0, 0);

그래서 FireFox 에서는 canvas 에 svg 의 내용을 표시할 수 없었다.

[참고]

http://stackoverflow.com/questions/17049176/ns-error-not-available-component-is-not-available

https://bugzilla.mozilla.org/show_bug.cgi?id=574330

---

[2014-09-17]

IE 9 (Internet Explorer 9) 에서도 image load 이벤트가 불리지 않는 현상이 있어서, 

( Chrome과 FireFox, Windows용 Safari 에서는 잘 동작했다. )

jQuery.imagesLoaded 라이브러리를 써서 코드를 다음과 같이 수정했다.

$(document).ready(function() {

	imagesLoaded(".image", function() {
		console.log("image load event called...");
		var url = window.location.href;
		if( url.lastIndexOf("#") > -1 ) {
			var target = url.substring(url.lastIndexOf("#"));
			moveOffset(target);
		}
	});

	// IE9 에서는 load 이벤트 핸들러가 불리지 않음.
	/*$(".image").load(function() {
		console.log("image load event called...");
		var url = window.location.href;
		if( url.lastIndexOf("#") > -1 ) {
			var target = url.substring(url.lastIndexOf("#"));
			moveOffset(target);
		}
	});*/
});