Page 1 of 1

Javascript image src change handler.

Posted: Mon Feb 12, 2007 2:42 pm
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. :)

Posted: Mon Feb 12, 2007 7:58 pm
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

Posted: Mon Feb 12, 2007 11:26 pm
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?

Posted: Tue Feb 13, 2007 10:01 am
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?