Versuchen, die Funktion zu verhindern, bis der Inhalt vollständig geladen ist

Question

Hallo Ich versuche zu verhindern, dass eine Animation auftritt, bis Bilder, die aus einem separaten HTML-Dokument abgerufen werden, vollständig geladen sind.

Soweit ich sagen kann, im Moment, der Code sagt: Laden Div mit ID von "Bilder" dann Funktion ausführen. Ich denke, was ich sagen will, ist Pull-ID von Bildern, warten Sie, bis die Bilder vollständig geladen sind, und führen Sie dann die Funktion aus. Hilfe wird sehr geschätzt.

$('#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 ein load Ereignishandler, um Ihre Bilder, die ausgeführt wird, wenn Bilder geladen werden und somit Ihre Animationen laufen.

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

Answer 2

Code, der nur ausgeführt werden muss, nachdem alles andere auf der Seite vollständig geladen wurde, um das Fenster wie so ...

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

Aus den jQuery docs gebunden ...

Das Ladeereignis wird an ein Element gesendet, wenn es und alle Unterelemente vollständig geladen wurden. Dieses Ereignis kann an jedes Element gesendet werden, das einer URL zugeordnet ist: Bilder, Skripts, Frames, Iframes und das Fensterobjekt. https://api.jquery.com/load-event/

Caveats des Ladeereignisses, wenn sie mit Bildern verwendet

eine gemeinsame Herausforderung Entwickler versuchen, die .load zu lösen() verwendet Verknüpfung ist eine Funktion auszuführen, wenn ein Bild (oder eine Sammlung von Bildern) vollständig geladen. Es gibt mehrere bekannte Vorbehalte, die beachtet werden sollten. Diese sind:

• Es ist nicht konsequent arbeiten noch zuverlässig Cross-Browser
• Es ist nicht richtig in WebKit abfeuert, wenn das Bild src in Bezug auf die gleiche src eingestellt ist, bevor
• Es ist nicht richtig Blase der DOM-Baum
• kann für Bilder zu schießen aufhören, die bereits in den Cache des Browsers leben

Bild Caching Probleme

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

imagesLoaded - jQuery Plugin

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