Javascript image src change handler.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Javascript image src change handler.

Post by JellyFish »

What event is used when an image's source is changed??? I need to bind a handle to an event that executes every time the user changes the source.

I could use onload, but then the event wouldn't fire till the image is fully loaded, which I need it to fire as soon as the source is changed.

Is there a way to add an event to a object property like imgelement.src? I tried:

Code: Select all

this.watch("src", function() {
alert("source changed!");
});
But then I get an Error in IE saying:
Object doesn't support this property or method.
I'm assuming that the property or method it's referring to is the watch method. Well then what object does support this method? Or is it that IE doesn't support this method at all?

Please help me on this one. Thanks. :)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You could try using the jQuery "change" event listener and test the src attr every time the element changes.

Look under Events > change() at http://www.visualjquery.com/1.1.1.html
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Thanks for you post Kieran!

Unfortunately I already applied the jQuery method to my image element and it doesn't appear to fire up once I change my source.

I have tried the .load(fn) as an jQuery alternative, but as I said it has to finish loading before the handle is executed. But when all else fails I'll probably use the method.

I don't think IE supports watch()???

I like that jQuery Visual reference, it's simple, did you make it?

Another problem I'm having is when I run:

Code: Select all

$(this).load(function() {
this.src = "somethingelse.gif"
});
I get a stack overflow error in IE when the image fires this event. I think it's be cause once the handle is executed, the src of the img is changed and the event executes once more. Then this repeats itself resulting in a never ending loop which IE detects and throws an error which IE calls "Stack overflow", I think.

So my question is how could I only change the src of the image if the src equals other then "somethingelse.gif"?

I try:

Code: Select all

$(this).load(function() {
if (this.src != "somethingelse.gif")
{
this.src = "somethingelse.gif"
}
});
and the results are the same... :(

What's going on here?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

There doesn't seem to be a DOM event fired at all :-( It seems like there should be!

How about moving that code into the script / action that changes the image src in the first place?
Post Reply