Determine whether an image has completed its download

I’m using jQuery to make a slideshow animation from images that are dynamically loading into the page and I’d like to hold the call to invoke the slideshow back until the images are completely downloaded. Is there a method in PHP for determining a completed download? (I’m pretty new to jQuery) It seems like jQuery’s ready doesn’t take into account the files that I’m downloading using the PHP script.

Or should I be using jQuery’s load() and a page fragment… and/or would I run into the same problem with the image paths being created by PHP and not really being in the page when jQuery does the load()?

I don’t know if it helps to show this, but the images are loaded from a path in stored in a db using PHP… it looks like this:

   
<div id="homeSlideshow">
<?php while ($rowSlideImage = mysql_fetch_array($slideshowResult, MYSQL_NUM)) { ?>
<img src="./slideshow_images/<?php echo $rowSlideImage[2]; ?>" />
<?php } ?>
</div>

Thanks!

You won’t be able to use PHP as the images load through the browser not the PHP engine, have a read of the following article which explains how check if the image has finished loading.

This has to be done using javascript and not php.

You can preload the images using javascript’s Image() object and then start your animation after all the images have been loaded. Do you have to use jquery to preload the images? It can be done with plain javascript with less code running.

Thanks!

I did some more investing and testing. I tried a couple different approaches. The onLoad works great and I added a little counter to see when all the images are loaded. I’m using jQuery for some other effects/transitions so I thought I’d investigate load(), but load() is unpredictable according to the documentation when it comes to images:

http://api.jquery.com/load-event/

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn’t work consistently nor reliably cross-browser
• It doesn’t fire correctly in WebKit if the image src is set to the same src as before
• It doesn’t correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser’s cache

I started searching around and found a couple plugins that both seem to work pretty nice. One is called imagesloaded and the other is waitforimages, the both seem to work pretty good, but I haven’t done any major cross-browser testing.

http://jsfiddle.net/desandro/RXDL4/
here’s a blog posting about it too:
http://metafizzy.co/blog/imagesloaded-plugin/

https://github.com/alexanderdickson/waitForImages