One big problem with using load() on images is that it just does not work at all on IE. Now there is a lot of solutions proposed to counter this problem but unfortunately most of them are irritating.

Why IE handle load() this way

Simple, IE already cached your image, why should it need to load it back? The 2 most know solution to this are 1, adding a random string at the end of the image url, like this:

myImge = $ ( "<img />" ) . attr ( "src" , anyDynamicSource + "?" + new Date ( ) . getTime ( ) ) ;

The other solution is to check the height property since if it’s not zero, the image is already loaded:

$ ( 'img' ) . each ( function ( ) { if ( $ ( this ) . height ( ) > 0 ) { our callback } else { $ ( this ) . load ( function ( ) { our callback } ) ; } } ) ;

Well these 2 solutions work, but they are not really nice. In fact this problem can be solved in a much better way.

Use load() first

Yup. That’s it, when you create your image in javascript, before doing anything else use your load function and IE will behave like all the other browsers.