Notify when img.src has changed and loaded

Printable View

01-04-2007, 10:45 PM
aversion

Notify when img.src has changed and loaded

I'm using JS to change an IMG src property and thus change the image but I need to know when that image has finished loading successfully.

Code:

for(v=0;v<docPicsLen;v++){ currentPic = docPics[v].src currentPic = currentPic.slice(currentPic.lastIndexOf("/")) docPics[v].src = newSize+currentPic; }

This code changes all the images on the page with a certain classname, collected in an array called docPics. You can see that it's grabbing the original file name and then changing the source folder (to the value of newSize) to load a different image with the same name.

It works fine but I want to run a loading notification that terminates when the image change has completed and I can't find a way to check when that is.

I know how to check if an image has loaded if the image object is new to the page but because I'm only changing the SRC property of the IMG object things like img.complete don't work, it will always return true if the original image loaded correctly, no matter what's going on with the change.

Anyone have any ideas? If I can't find a way I'm going to have to replace the images altogether, which will be a pain in the neck.
01-05-2007, 05:35 AM
catbert303

If browsers supported event capture (well, I guess what I mean is if browsers with more than 10 people using them supported it right ;)) you could setup a capturing listener on the page and that would be triggered as each of your images were loaded.

Code:

// works in Opera, and probably KHTML browsers like Safari window.addEventListener('load', function(e) { alert(e.target); }, true);

but without that, you could maybe assign a load event listener to each image. Here's a quick example -

Code:

<html> <head> <title>Test img load</title> <script type="text/javascript"> function swapImages(newDir) { var imgs = document.getElementsByTagName('img'); var n = imgs.length; while (n--) { if (imgs[n].className == 'change-me') { imgs[n].src = newDir + imgs[n].src.slice(imgs[n].src.lastIndexOf('/')); } } } // setup the event listeners function init(e) { var imgs = document.getElementsByTagName('img'); var n = imgs.length; while (n--) { addEvent(imgs[n], 'load', imgLoad); } } // do something when the image is loaded function imgLoad(e) { if (!e) var e = window.event; // note: I don't know which is correct, but moz reports e.target as being the document and e.currentTarget as the image // opera says both e.target and e.currentTarget are the img - which is what I would've expected... // IE doesn't have the concept of a currentTarget, but srcElement (it's version of target) points at the img element var target = e.currentTarget || e.srcElement; alert(target.src + ' is loaded'); } // add your own preference for an addEvent function here ;) function addEvent(obj, ev, fn) { if (obj.addEventListener) { obj.addEventListener(ev, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + ev, fn); } } addEvent(window, 'load', init); </script> </head> <body> <img src="imgs1/1.jpg" class="change-me"> <img src="imgs1/2.jpg" class="change-me"> <img src="imgs1/3.jpg"> <img src="imgs1/4.jpg" class="change-me"> <p><a href="javascript:swapImages('imgs2');">swap</a></p> </body> </html>

Since you should know how many images are being swapped, you could simply increment a counter from the imgLoad function - so then when it reached the total you'd know all the images were in place.

Hope this helps :)
01-05-2007, 12:11 PM
aversion

Thanks Catbert, that works, I didn't even think of using listeners for some stupid reason. I'm working with the prototype.js library so I can just use:

Code:

for(v=0;v<docPicsLen;v++){ Event.observe(docPics[v], 'load', imgLoaded, false); currentPic = docPics[v].src currentPic = currentPic.slice(currentPic.lastIndexOf("/")) docPics[v].src = newSize+currentPic; }

Where imgLoaded is a function that counts them in.

Thanks a lot, sometimes I can't see past my own nose :)