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.

Why do you want to dynamically load an image like that? There are several other solutions for preloading an image. — MaxArt, Jun 09 '13 at 17:32
1. I need loading dynamicaly, because I want to edit the loaded file, doing some manipulations to that file, before uploading it to server (with less traffics). 2. I need solution for IE9. FileReader is not working for IE9. — Eitan, Jun 09 '13 at 17:38
I'm sorry, but unless I'm terribly mistaken and IE9 has some serious security breach - which is unlikely - that solution does nothing like `FileReader`. So, to make things clear, do you want to load an image *from the client* or *the server*? — MaxArt, Jun 09 '13 at 22:43

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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

edited May 23 '17 at 11:49

Community

1
1

answered Jun 09 '13 at 17:35

marlenunez

626
4
9

Your code is not compiled, but I appriciate you efforts. Also I succeeded at last, as the delay I added (my last post of this thread). Problem solved, so you can consider this issue as closed. – Eitan Jun 14 '13 at 16:51

score 1 · Answer 2 · edited Sep 30 '13 at 03:51

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.

You could do a repeating timeout until said image has width and height you can track. That way you can avoid any big delay. — René, Jun 14 '13 at 17:00

The event after loading image on IE9

2 Answers2

Linked