$(document).ready() wird zu früh ausgelöst

Lesezeit: 6 Minuten

Ich muss also die Breite eines Elements mit Javascript kennen. Das Problem, das ich habe, ist, dass die Funktion zu früh ausgelöst wird und sich die Breite ändert, wenn das CSS vollständig angewendet wird. Wie ich verstanden habe, wurde die Funktion $(document).ready() ausgelöst, wenn das Dokument fertig ist, aber es scheint nicht so zu funktionieren.

Wie auch immer, ich bin mir sicher, dass mein Problem mit dem Code verstanden wird (dies ist ein vereinfachtes Beispiel):

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css">

    <style type="text/css">
        #target {
            font-family: 'Parisienne', cursive;
            float: left;
        }
    </style>
</head>
<body>
    <div id="target">Element</div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function(){
        console.debug($('#target').outerWidth());
        alert('hold on');
        console.debug($('#target').outerWidth());
    });
</script>

Ich möchte die Breite des #target div wissen, das Problem ist, dass der Code, der vor der Warnung ausgeführt wird, eine andere Ausgabe liefert als der danach, vermutlich weil die Schriftart nicht vollständig geladen ist und das div mit der Standardschrift misst.

Es funktioniert wie erwartet in Google Chrome, aber nicht in IE und Firefox.

  • Ich kann am 24.11.2013 bestätigen, dass dieses Problem bei JQuery 2.x immer noch besteht, wenn Sie auf die Schaltfläche zum Aktualisieren des Browsers klicken. Gehen Sie dazu Geige. Wenn Sie die Geige zum ersten Mal laden, sollte alles die meiste Zeit gut funktionieren. Es funktioniert auch, wenn Sie Ihren Mauszeiger in die URL setzen und die Eingabetaste drücken. Aber die Dinge werden zum Teufel gehen, wenn Sie auf die Schaltfläche „Aktualisieren“ klicken oder drücken STRG+R.

    – Martin Andersson

    24. November 2013 um 11:48 Uhr


  • Ich habe versucht, einen “Countdown-Latch” zu implementieren, um Breite und Höhe nur zu messen, wenn sowohl das Laden des Fensters als auch das Feuer der abhängigen Schriftarten beendet ist. Mal sehen, ob es hilft: http://jsfiddle.net/jLDbX/1/. Bei dieser Geige scheint alles richtig zu funktionieren. Aber in meiner realen Anwendung bekam ich immer wieder Fehler. Bei dir könnte es aber funktionieren.

    – Martin Andersson

    24. November 2013 um 13:10 Uhr

Benutzer-Avatar
Mira Weller

Wenn Sie darauf angewiesen sind, dass externe Inhalte bereits geladen sind (z. B. Bilder, Schriftarten), müssen Sie das window.load-Ereignis verwenden

$(window).on("load", function() {
    // code here
});

Das Verhalten dieser Ereignisse ist in beschrieben Dieser Artikel:

Es gibt [a] Bereitschaftszustand, jedoch bekannt als DOM-bereit. Dies ist der Fall, wenn der Browser die Seite tatsächlich erstellt hat, aber möglicherweise noch einige Bilder oder Flash-Dateien abrufen muss.

Bearbeiten: geänderte Syntax, um auch mit jQuery 3.0 zu funktionierenwie von Alex H

  • Zwei Jahre später immer noch hilfreich!

    – Stachu

    30. Januar 2014 um 15:32 Uhr

  • In JQuery 3.0 sollten Sie die Syntax verwenden $(window).on('load', function() { }); da $(window).load() veraltet ist.

    – Alex H

    21. Juli 2016 um 6:06 Uhr

  • @AlexH, guter Punkt. $(window).load() war in jQuery 1.8 veraltet. Außerdem ist es verwirrend, weil es zwei gibt .load() Methoden in jQuery (bevor die Ereignisbehandlung entfernt wurde).

    – ryanpcmcquen

    15. Dezember 2017 um 12:54 Uhr

  • Da dies die Top-Antwort ist, ist es erwähnenswert, dass dies tatsächlich in jQuery 3.0 an Methoden werden abgeschrieben und man sollte .ready()/.load() verwenden api.jquery.com/ready/#ready-handler

    – darth0s

    7. Februar 2019 um 14:26 Uhr


  • @darth0s nein, die $(window).on(‘load’,…) Syntax hat sich nicht geändert und $(window).load() wurde tatsächlich entfernt. Sie haben jedoch Recht mit dem Fall .ready().

    – Mira Weller

    7. Februar 2019 um 14:36 ​​Uhr

Benutzer-Avatar
Funkelnd

Zitat OP:

„So wie ich es verstanden habe, die $(document).ready() Funktion wurde ausgelöst, wenn das Dokument fertig ist”,

$(document).ready() wird ausgelöst, wenn das DOM (“Dokumentobjektmodell”) vollständig geladen und zur Bearbeitung bereit ist. Das DOM ist nicht dasselbe wie das “Dokument”.

W3C – DOM Häufig gestellte Fragen

Du kannst es versuchen $(window).load() Funktion statt…

$(window).load(function() {
    // your code
});

Es wartet, bis alle Elemente der Seite (wie Bilder und Schriftarten usw.) vollständig geladen sind, bevor es ausgelöst wird.

Die Funktion jQuery .ready() wird ausgelöst, sobald das DOM vollständig ist. Das bedeutet nicht, dass zu diesem Zeitpunkt alle Assets (wie Bilder, CSS usw.) geladen wurden und sich daher die Größe der Elemente ändern kann.

Verwenden Sie $(window).load(), wenn Sie die Größe eines Elements benötigen.

Das „ready“-Ereignis wird ausgelöst, wenn das DOM geladen wird, d. h. wenn es möglich ist, sicher mit dem Markup zu arbeiten.

Um zu warten, bis alle Assets geladen sind (CSS, Bilder, externes Javascript …), verwenden Sie lieber das Load-Ereignis.

$(window).load(function() {
    ...
});

Du könntest benutzen $(window).load(), aber das wartet auf alle Ressourcen (z. B. Bilder usw.). Wenn Sie nur warten möchten, bis die Schriftart geladen ist, können Sie Folgendes versuchen:

<script type="text/javascript"> 
    var isFontLoaded = false;
    var isDocumentReady = false;
    $("link[href*=fonts.googleapis.com]").load(function () {
        isFontLoaded = true;
        if (isDocumentReady) {
            init();
        }
    });
    $(document).ready(function () {
        isDocumentReady = true;
        if (isFontLoaded) {
            init();
        }
    });
    function init () {
        // do something with $('#target').outerWidth()
    }
</script> 

Haftungsausschluss: Ich bin mir nicht ganz sicher, ob das funktionieren wird. Das <link> Das onload-Ereignis kann ausgelöst werden, sobald das Stylesheet geparst ist, aber bevor seine externen Ressourcen heruntergeladen wurden. Vielleicht könntest du ein Hidden hinzufügen <img src="https://stackoverflow.com/questions/9134918/fontFile.eot" /> und platzieren Sie stattdessen Ihren Onload-Handler auf dem Bild.

Benutzer-Avatar
jeesty

Ich habe absolut wiederholt das gleiche Problem in IE9 und IE10 gesehen. Der Aufruf jquery ready() wird ausgelöst und einer meiner

existiert nicht. Wenn ich das erkenne und dann nach einem kurzen Timeout() erneut aufrufe, funktioniert es einwandfrei.

Meine Lösung, nur um sicherzugehen, war zweifach:

  1. Hängen Sie am Ende des Dokuments ein an und prüfen Sie dann im ready()-Callback, UND, ob diese Variable vorhanden ist

  2. Prüfen Sie, ob $(‘#lastElementInTheDocument’).length > 0 ist

Ja, ich erkenne, dass dies fiese Hacks sind. Wenn ready() jedoch nicht wie erwartet funktioniert, ist eine Art Umgehung erforderlich!

Abgesehen davon besteht die “richtige” Lösung wahrscheinlich darin, $.holdReady in der Kopfzeile zu setzen und am Ende des Dokuments zu löschen. Aber die wirklich richtige Lösung ist natürlich, dass ready() funktioniert.

Das Problem $(document).ready() wird zu früh ausgelöst kann manchmal passieren, weil Sie die Funktion jQuery onReady nicht richtig deklariert haben.

Wenn Sie Probleme haben, stellen Sie sicher, dass Ihre Funktion genau so deklariert ist:

 $(document).ready(function() 
 {
   // put your code here for what you want to do when the page loads.
 });

Wenn Sie beispielsweise den anonymen Funktionsteil vergessen haben, wird der Code immer noch ausgeführt, aber er wird “außer Betrieb” ausgeführt.

console.log('1');
$(document).ready()
{
  console.log('3');
}
console.log('2');

dies wird ausgegeben

1
3
2

1216040cookie-check$(document).ready() wird zu früh ausgelöst

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy