Alaw16 Alaw16 - 4 months ago 7
Javascript Question

Trying to prevent function until after content is fully loaded

Hi I'm attempting to prevent an animation from occurring until after images that are being pulled from a separate html document are fully loaded.

As far as I can tell, right now, the code is saying: load div with id of "images" then run function. I guess what I want it to say is pull id of images, wait for images to load fully, then run function. Help is much appreciated.

$('#nav a, .section a').click(function(event) {
event.preventDefault();

$('.project-detail').load(this.href + " #images", function() {
$('.project-detail').removeClass('no-transition');
$('.project-detail').addClass('move-left');
$('#close-tag').addClass('desktop-close-move');
$('#doit').addClass('close-move');
});

});

Answer

Bind a load event handler to your images which will be executed when images are loaded and thus run your animations.

$(your_images).load(function() {
  //run your animations here when images are loaded
});