The event after loading image on IE9

Question

I am writing an internet site, using javascript, HTML for IE9.

I found solution to loading dynamically the image by:

document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value

id_image related to the <IMG> and id_filepic related to <input id="id_filepic" type="file">

After the line:

document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value

what is the exact event that occurs just after the image is shown on the html page (hence, the image has width + height), and how can I capture that event?

It is important to me knowing the solution for IE9.

Answer 1

It doesn't have to be after that line, since it will be asynchronous anyway, but here it is:

document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
document.getElementById("id_image").addEventListener('load', (function(i) {
    return function() {
        console.log(i, 'loaded');
    }, false);
})(i));

Source: Javascript Image onload event binding

Answer 2

I want to participate my solution, I have found.

Well, the above is not compilable, and also 'onload' is not the correct event (it is not fired after using the "filter" command, as far as I investigated).

What I did is a little delay, with timeout command (about one second) like this :

    setTimeout(function () {
        alert("w: " + $("#id_image").width());
        alert("h: " + $("#id_image").height());
    }, 1000); 

(even 100 milliseconds is enough, but I check that out for very large images. 1 second is quite big not to fall by code on large images).

After the delay, I could retrieve the image width and height with no problem.

That's complete this issue.