在内容完全加载后尝试阻止功能

Question

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 1

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

Answer 2

Code that needs to be run only after everything else on the page has been fully loaded can be bound to the window like so...

$(window).on("load", function() {
    // after everything has fully loaded, do this
});

From the jQuery docs...

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object. https://api.jquery.com/load-event/

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

Image Caching Issues

• http://mikefowler.me/2014/04/22/cached-images-load-event/

imagesLoaded - jQuery Plugin

• https://github.com/desandro/imagesloaded