Detect when images have been loaded

One thing I've noticed when displaying images using ajax is that images are always the last thing to show on a page, this means that it doesn't load during the success event or even in the complete event of the ajax call, this could cause problems when you try to calculate the width/height of the container before the image is shown.

You could see that the images doesn't get loaded even inside ajax complete event

still no image shown...

Images will be loaded after the container height has been calculated, so it causes your container to overlap each other like shown below:

To fix this, you can include a separate script Images Loaded inside your page, it detects when your images have been loaded. To use it simply add it to where you want to detect your image load, in my case, i want to calculate my masonry container after all of the images have been loaded.

//layout masonry after all images loaded
$grid.imagesLoaded(function () {

Leave a comment