Alaw16 Alaw16 - 1 year ago 50
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 Source

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
});