Search code examples
jqueryajaximageprogressaddeventlistener

jquery: ajax track progress of request inc images and other assets in load time

Basically, i want track progress of my application with percentage, when sending AJAX request but important part to include images loading, so ajax request should only complete once all the images / css 100% fully loaded.

I know you can track progress either using the HTML5 addEventListener("progress", function(e) {} or repeatedly calling a setTimeout function.

But neither approach say when images on the page are fully loaded. Other option is to use .load() for images, but this does not track progress?

So my question, is it possible to load images and track progress within ajax?, or load 50 odd images using individual ajax requests.

any idea or sample code will be very hopeful.

thanks.

Solution

  • I have ended up using this library PreloadJS. Which is pretty easy to use and does most of what i needed :

    http://www.createjs.com/#!/PreloadJS