View Full Version : Reg. rendering images

26 Aug 2010, 2:52 AM
Hi Friends,

How I can know in ExtJs if an image is rendered into the browser or not? I'm facing a scenario where I don't want to take actions when the user clicks on an image that's not at all rendered.

Dnana | Trigent

26 Aug 2010, 12:17 PM
If you create an Image object and set the src, a load event will be fired on the image when it is fully loaded.

26 Aug 2010, 10:08 PM
Yeh.. I know that. I have a dataview that displays thumb-nail images. When the user clicks any image I'll execute following code

processWindow.show();//show a loading gif image.
var image = new Image();
image.src = selectedUrl; //selected image's url.
image.onload = ...//hide the processWindow.

Since there are chances that image not physically exists in the server, the image onload event will never fire and the processWindow will keep on showing. This is the problem!

Thanks & Regards
Vijaya Anand .M

27 Aug 2010, 12:53 PM
You should setup event listeners for the abort and error events as well.

29 Aug 2010, 10:13 PM
Ah!! I missed that. It's worked. Thanks acoran.

Dnana | Trigent

28 Oct 2010, 6:54 PM
There's actually another issue here. If the image is in the browser's cache, some browsers won't fire the load event. Does anyone have a workaround for that?

1 Nov 2010, 7:44 AM
I think whenever we set the src value the load event will fire. I'm not sure about this! I noticed one thing in IE, before assigning the src value we have to hook into the onload event. So I changed the order of statements like this,

var img = new Image();
img.onload = function(){};
img.onerror = function(){};//first hook into the events
img.src = newurl;//then change the src value