Run javascript after inserted partial is loaded

Question

After an ajax request, I insert a partial into the page.

Now I want to wait until all the images are loaded, then fade them in.

$(document).ready doesn't work because the document was already ready. How can I set this up?

Answer 1

Seems similar to these questions:

• Official way to ask jQuery wait for all images to load before executing something
• Javascript wait for image to load before calling Ajax

The suggestion was to use a plugin to help:

• http://plugins.jquery.com/project/BatchImagesLoad
• https://github.com/alexanderdickson/waitForImages

Answer 2

You can pre-load an image and call a function once it's fully loaded by doing the following:

var img = new Image();
img.addEventListener('load', myCallBackFunction, false);
img.src = 'my/img/src/';

In this case, myCallBackFunction will be called once the image is fully loaded. So if you have multiple images, you could use a counter to track if they've all loaded yet. For example:

imgReadyCounter = 0;

imgReadyCallBack = function(){
    imgReadyCounter++;
    if(imgReadyCounter === numOfImages){ //numOfImages would be however images you are loading
        //fadeIn your content
    }
}

//then do the following for each image
var img = new Image();
img.addEventListener('load', imgReadyCallBack, false);
img.src = 'my/img/src/';

The great thing about this method is that even if the user already has the image in his browser's cache, the callback function will still be called. Many other techniques will result in the callback not being called for cached images.

Answer 3

Do you know the images ahead of time? If so you can do this:

 (function(){
    var preLoadImg = new Image();
    preLoadImg.src = "/images/button.png";

    var preLoadImgLoading = new Image();
    preLoadImgLoading.src = "/images/loading.gif";
})();

Or...

$('#img1').load(function(){
  // fadeIn
});

Answer 4

You can use an preloader plugin which preload images, then show them once they've fully loaded

This page shows about loading images with jQuery.

• http://codesnippets.joyent.com/