jQuery: Dokument bereit Feuer zu früh für meine Anforderungen

Question

Ich entwickle eine Website rund um Fotos. Einige Bereiche dieser Website erfordern Berechnungen basierend auf Bilddimensionen, um korrekt zu funktionieren. Was ich gefunden habe, ist, dass das Dokument fertig ist zu früh feuert und meine GUI verhält sich daher erratisch.

Ich habe die Dokument-Ready-Funktion entfernt und sie durch die gute 'ol window.onload'-Funktion ersetzt, denn wenn ich richtig lese, wird diese Funktion erst ausgelöst, wenn die Bilder vollständig geladen sind.

Meine Frage ist, wird dies irgendwelche Probleme verursachen? Und gibt es noch andere Lösungen, die ich vielleicht verpasst habe?

Danke für die Hilfe Jungs !!

Answer 1

Es gibt keinen Grund, warum Sie nicht $(window).load() zu $(document.ready() im Gegensatz nutzen können. Sie haben Recht, wenn die Funktion nicht ausgelöst wird, bis Bilder vollständig geladen sind (oder nicht geladen werden konnten).

Der Nachteil voll auf $(window).load() angewiesen sind, dass in einigen Fällen ist es leicht ersichtlich, keine Ihrer Javascript ist arbeitet (das heißt Navigation oder Click-Ereignisse), bis jeder einzelne Artikel auf Ihrer Seite geladen wurde. Einige Benutzer, in der Regel die Hauptbenutzer einer Website, klicken ziemlich schnell durch die Seiten, was die allgemeine Benutzerfreundlichkeit beeinträchtigt.

Die Mittelweg würde $(window).ready() für die meisten Situationen Einsatz seinundEreignisse nur innerhalb $(window).load() setzen, die sie absolut benötigen.

Answer 2

Versuchen Sie stattdessen:

$(window).load(function() { 
alert("images are loaded!"); 
}); 

diesen Link finden Sie einen Vergleich von $(document).ready() und $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

Sie könnten die load() event in jquery verwenden, aber in der Dokumentation wird erwähnt, dass es möglicherweise nicht wie erwartet funktioniert, wenn das Element bereits geladen wurde.

Hinweis: Laden funktioniert nur, wenn Sie es setzen, bevor das Element vollständig geladen wurde, wenn Sie danach festlegen, wird nichts passieren. Dies geschieht nicht in $ (document) .ready(), was jQuery so behandelt, dass es erwartungsgemäß funktioniert, auch wenn es nach dem Laden des DOM gesetzt wird. - http://docs.jquery.com/Events/load

Answer 4

Altough window.onload würde Ihre Bedürfnisse anzupassen, würde ich empfehlen, die Dinge ein wenig zu beschleunigen:

$("img.load").load(function(){ 
    alert($(this).width()); 
}); 

Jetzt können Sie Bild einzeln so schnell verarbeiten, wie es geladen wird und nicht warten für die ganze Reihe von Elementen.

Answer 5

Wenn Sie es mit einer Menge an Zeit vielleicht gegeben verzögern wollen, können Sie „setTimeout“ :)

Answer 6

Hier ist eine sehr einfache Lösung verwenden:

Fügen Sie die width="" und height="" Attribute für alle Bilder. Dadurch wird der Browser gezwungen, alles korrekt und an Ort und Stelle zu rendern, noch bevor die Bilder geladen sind. Der Platz, der für jedes Bild auf der Seite benötigt wird, wird beim Laden der Bilder ordnungsgemäß beiseite gelegt.

Das war's! Wenn Sie das tun, document.ready wird in Ihrem Szenario gut funktionieren. Was passiert, ist, dass der Browser die Größe der Bilder nicht weiß, bevor sie abgerufen/geladen werden, so dass der Browser raten muss. Das kann das komische Verhalten verursachen. Die Angabe der Breite und Höhe Ihrer Bilder löst dieses Problem.

Ich bin überrascht, dass niemand das erwähnte. Es ist nicht unbedingt ein Javascript-Problem, obwohl cballou's answer definitiv ein guter Rat ist.

Wie auch immer, ich hoffe, Sie haben etwas Neues gelernt. ;)