window.onload vs $(document).ready()

Wat zijn de verschillen tussen JavaScript’s window.onloaden jQuery’s $(document).ready()methode?


Antwoord 1, autoriteit 100%

De gebeurtenis readyvindt plaats nadat het HTML-document is geladen, terwijl de gebeurtenis onloadlater plaatsvindt, wanneer alle inhoud (bijv. afbeeldingen) ook is geladen.

p>

De gebeurtenis onloadis een standaardgebeurtenis in de DOM, terwijl de gebeurtenis readyspecifiek is voor jQuery. Het doel van de ready-gebeurtenis is dat deze zo vroeg mogelijk moet plaatsvinden nadat het document is geladen, zodat code die functionaliteit toevoegt aan de elementen op de pagina niet hoeft te wachten tot alle inhoud is laden.


Antwoord 2, autoriteit 11%

window.onloadis de ingebouwde JavaScript-gebeurtenis, maar omdat de implementatie ervan subtieleeigenaardigheden had in alle browsers (Firefox, Internet Explorer 6, Internet Explorer  8, en Opera), biedt jQuery document.ready, die deze abstraheert, en wordt geactiveerd zodra de DOM van de pagina gereed is (wacht niet op afbeeldingen, enz.).

$(document).ready(merk op dat het nietdocument.readyis, wat niet gedefinieerd is) is een jQuery-functie, inwikkeling en consistentiebieden aan de volgende evenementen:

  • document.ondomcontentready/ document.ondomcontentloaded– een nieuwe gebeurtenis die wordt geactiveerd wanneer de DOM van het document wordt geladen (wat enige tijd voorkan zijn de afbeeldingen, etc. worden geladen); nogmaals, iets anders in Internet Explorer en in de rest van de wereld
  • en window.onload(die zelfs in oude browsers is geïmplementeerd), die worden geactiveerd wanneer de hele pagina wordt geladen (afbeeldingen, stijlen, enz.)

Antwoord 3, autoriteit 7%

$(document).ready()is een jQuery-gebeurtenis. De methode $(document).ready()van JQuery wordt aangeroepen zodra de DOM gereed is (wat betekent dat de browser de HTML heeft geparseerd en de DOM-boomstructuur heeft gebouwd). Hierdoor kunt u code uitvoeren zodra het document klaar is om te worden gemanipuleerd.

Als een browser bijvoorbeeld de DOMContentLoaded-gebeurtenis ondersteunt (zoals veel niet-IE-browsers doen), wordt deze op die gebeurtenis geactiveerd. (Merk op dat de gebeurtenis DOMContentLoaded alleen is toegevoegd aan IE in IE9+.)

Hiervoor kunnen twee syntaxis worden gebruikt:

$( document ).ready(function() {
   console.log( "ready!" );
});

Of de verkorte versie:

$(function() {
   console.log( "ready!" );
});

Belangrijkste punten voor $(document).ready():

  • Het zal niet wachten tot de afbeeldingen zijn geladen.
  • Gebruikt om JavaScript uit te voeren wanneer de DOM volledig is geladen. Zet hier event handlers.
  • Kan meerdere keren worden gebruikt.
  • Vervang $door jQuerywanneer u ontvangt “$ is niet gedefinieerd.”
  • Niet gebruikt als je afbeeldingen wilt manipuleren. Gebruik in plaats daarvan $(window).load().

window.onload()is een native JavaScript-functie. De gebeurtenis window.onload()wordt geactiveerd wanneer alle inhoud op uw pagina is geladen, inclusief het DOM (documentobjectmodel), banneradvertenties en afbeeldingen. Een ander verschil tussen de twee is dat, hoewel we meer dan één $(document).ready()functie kunnen hebben, we maar één onloadfunctie kunnen hebben.


Antwoord 4, autoriteit 3%

Een gebeurtenis Windows loadwordt geactiveerd wanneer alle inhoud op uw pagina volledig is geladen, inclusief de DOM-inhoud (document objectmodel) en asynchrone JavaScript, frames en afbeeldingen. U kunt ook body onload= gebruiken. Beide zijn hetzelfde; window.onload = function(){}en <body onload="func();">zijn verschillende manieren om dezelfde gebeurtenis te gebruiken.

jQuery $document.readyfunctiegebeurtenis wordt iets eerder uitgevoerd dan window.onloaden wordt aangeroepen zodra de DOM (Document object model) wordt op uw pagina geladen. Het zal niet wachten tot de afbeeldingen, frames volledig zijn geladen.

Genomen uit het volgende artikel:
hoe $document.ready()is anders dan window.onload()


Antwoord 5, autoriteit 3%

Een kleine tip:

Altijdgebruik de window.addEventListenerom een gebeurtenis aan venster toe te voegen. Omdat je op die manier de code in verschillende event-handlers kunt uitvoeren.

Correcte code:

window.addEventListener('load', function () {
  alert('Hello!')
})
window.addEventListener('load', function () {
  alert('Bye!')
})

Antwoord 6, Autoriteit 2%

$(document).ready(function() {
    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});
// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {
     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Antwoord 7, Autoriteit 2%

Een woord van de waarschuwing bij het gebruik van $(document).ready()met Internet Explorer. Als een HTTP-verzoek vóór is onderbroken, wordt het hele document geladen (bijvoorbeeld, terwijl een pagina streamt naar de browser, wordt er een andere link geklikt) IE zal de $(document).readyEvenement.

Indien een code binnen de $(document).ready()Evenement Referenties DOM-objecten, bestaat het potentieel voor die objecten die niet moeten worden gevonden en kunnen JavaScript-fouten optreden. Bewaak uw verwijzingen naar die objecten of de uitstelcode die deze objecten naar het venster verwijdert. Laad evenement.

Ik heb dit probleem niet kunnen reproduceren in andere browsers (specifiek, chroom en firefox)


Antwoord 8, Autoriteit 2%

De $(document).ready()is een jQuery-gebeurtenis die optreedt wanneer het HTML-document volledig is geladen, terwijl de window.onloadgebeurtenis vindt later plaats, wanneer alles inclusief afbeeldingen op de pagina wordt geladen.

Ook window.onload is een pure javascript-gebeurtenis in de DOM, terwijl de $(document).ready()-gebeurtenis een methode is in jQuery.

$(document).ready()is meestal de wrapper voor jQuery om ervoor te zorgen dat alle elementen die zijn geladen, worden gebruikt in jQuery…

Bekijk de jQuery-broncode om te begrijpen hoe het werkt:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {
        readyList = jQuery.Deferred();
        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );
        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );
            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );
        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );
            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );
            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;
            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}
            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {
                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }
                        // detach all dom ready events
                        detach();
                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );
    return this;
};

Ik heb ook de onderstaande afbeelding gemaakt als snelle referentie voor beide:


Antwoord 9

Evenementen

$(document).on('ready', handler)bindt aan de ready-gebeurtenis van jQuery. De handler wordt aangeroepen wanneer de DOM is geladen. Items zoals afbeeldingen ontbreken misschien nog. Het wordt nooit aangeroepen als het document klaar is op het moment van binden. jQuery gebruikt de DOMContentLoaded-Event daarvoor, emuleren indien niet beschikbaar.

$(document).on('load', handler)is een gebeurtenis die wordt geactiveerd zodra alle resourcesvan de server zijn geladen. Afbeeldingen worden nu geladen. Hoewel onloadeen onbewerkte HTML-gebeurtenis is, is readyis gebouwd door jQuery.

Functies

$(document).ready(handler)is eigenlijk een belofte. De handler wordt onmiddellijk aangeroepen als het document gereed is op het moment van aanroepen.Anders wordt het gebonden aan het ready-Event.

Vóór jQuery 1.8, $(document).load(handler)bestond als een alias voor $(document).on('load',handler).

Verder lezen


Antwoord 10

window.onload:Een normale JavaScript-gebeurtenis.

document.ready:Een specifieke jQuery-gebeurtenis wanneer de volledige HTML is geladen.


Antwoord 11

document.ready(een jQuery-gebeurtenis) wordt geactiveerd wanneer alle elementen aanwezig zijn en er kan naar worden verwezen in de JavaScript-code, maar de inhoud is niet noodzakelijkerwijs geladen. document.readywordt uitgevoerd wanneer het HTML-document wordt geladen.

$(document).ready(function() {
    // Code to be executed
    alert("Document is ready");
});

Het window.loadzal echter wachten tot de pagina volledig is geladen. Dit omvat binnenframes, afbeeldingen, enz.

$(window).load(function() {
    //Fires when the page is loaded completely
    alert("window is loaded");
});

Antwoord 12

Eén ding om te onthouden (of moet ik zeggen herinneren) is dat je onloads niet kunt stapelen zoals je kunt met ready. Met andere woorden, jQuery magic staat meerdere readys toe op dezelfde pagina, maar dat kan niet met onload.

De laatste onloadheeft voorrang op alle eerdere onloads.

Een leuke manier om daarmee om te gaan is met een functie die blijkbaar is geschreven door ene Simon Willison en wordt beschreven in Meerdere JavaScript-onload-functies gebruiken.

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

Antwoord 13

De gebeurtenis document.ready vindt plaats wanneer het HTML-document is geladen, en de gebeurtenis window.onloadvindt altijd later plaats, wanneer alle inhoud (afbeeldingen, enz.) is geladen.

U kunt de gebeurtenis document.readygebruiken als u “vroeg” in het weergaveproces wilt ingrijpen, zonder te wachten tot de afbeeldingen zijn geladen.
Als u de afbeeldingen (of andere “inhoud”) gereed wilt hebben voordat uw script “iets doet”, moet u wachten tot window.onload.

Als u bijvoorbeeld een “Diavoorstelling”-patroon implementeert en berekeningen moet uitvoeren op basis van afbeeldingsformaten, kunt u het beste wachten tot window.onload. Anders kunt u enkele willekeurige problemen ondervinden, afhankelijk van hoe snel de afbeeldingen worden geladen. Uw script zou gelijktijdig worden uitgevoerd met de thread die afbeeldingen laadt. Als uw script lang genoeg is, of als de server snel genoeg is, merkt u mogelijk geen probleem als afbeeldingen op tijd aankomen. Maar de veiligste praktijk zou zijn om afbeeldingen te laten laden.

document.readyzou een leuk evenement voor je kunnen zijn om een “loading…”-teken aan gebruikers te laten zien, en op window.onloadkun je elke scripting waarvoor bronnen moeten worden geladen, en verwijder vervolgens het teken “Bezig met laden…”.

Voorbeelden:-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})
// using JQuery
$(function(){
   alert("document is ready..");
})
// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

Antwoord 14

window.onloadis een JavaScript-ingebouwde functie. window.onloadtrigger wanneer de HTML-pagina is geladen. window.onloadkan slechts één keer worden geschreven.

document.readyis een functie van de jQuery-bibliotheek. document.readyTRUGERS Wanneer HTML en alle JavaScript-code, CSS en afbeeldingen die zijn opgenomen in het HTML-bestand volledig zijn geladen.
document.readykan meerdere keren volgens de vereisten worden geschreven.


Antwoord 15

Wanneer u zegt $(document).ready(f), vertel u de scriptmotor om het volgende uit te voeren:

  1. Krijg het objectdocument en duw het, omdat het niet in de lokale reikwijdte is, het moet een Hash-tabel zoeken om te vinden waar het document is, gelukkig wordt document wereldwijd gebonden, dus het is een enkele lookup.
  2. Zoek het object $en selecteer deze, omdat het niet in de lokale reikwijdte is, moet het een Hash-tabel-opzoeken doen, die al dan niet botsingen kunnen hebben.
  3. Zoek het object F in Global Scope, dat is een andere HASH-tabel-opzoeken, of push-functieobject en initialiseer het.
  4. Oproep readyvan geselecteerd object, dat een andere hash-tabel opzoekt in het geselecteerde object om de methode te vinden en het aan te roepen.
  5. gedaan.

In het beste geval is dit 2 hash-tabel-lookups, maar dat negeert het zware werk gedaan door jQuery, waar $de aanrecht van alle mogelijke inputs voor jQuery is, zodat een andere kaart waarschijnlijk is daar om de query te verzenden om handler te corrigeren.

U kunt dit ook doen:

window.onload = function() {...}

die

  1. vind het objectvenster in globaal bereik, als JavaScript is geoptimaliseerd, weet het dat aangezien het venster niet is gewijzigd, het al het geselecteerde object heeft, dus er hoeft niets te worden gedaan.
  2. functie-object wordt op de operand-stack geduwd.
  3. controleer of onloadeen eigenschap is of niet door een hashtabel op te zoeken, aangezien dit het geval is, wordt het aangeroepen als een functie.

In het beste geval kost dit een enkele hashtabel-lookup, wat nodig is omdat onloadmoet worden opgehaald.

Idealiter zou jQuery hun zoekopdrachten compileren naar strings die kunnen worden geplakt om te doen wat je wilde dat jQuery zou doen, maar zonder de runtime-dispatching van jQuery. Op deze manier heb je de keuze uit

  1. doe dynamische verzending van jQuery zoals we dat tegenwoordig doen.
  2. laat jQuery uw zoekopdracht compileren naar pure JavaScript-tekenreeks die kan worden doorgegeven aan eval om te doen wat u wilt.
  3. Kopieer het resultaat van 2 rechtstreeks in uw code en sla de kosten van evalover.

Antwoord 16

window.onload wordt geleverd door DOM api en er staat “de load-gebeurtenis wordt geactiveerd wanneer een bepaalde bron is geladen”.

“De load-gebeurtenis wordt geactiveerd aan het einde van het laadproces van het document. Op dit punt bevinden alle objectenin het document zich in het DOM en alle afbeeldingen, scripts, links en sub -frames zijn geladen.”
DOM onload

Maar in jQuery $(document).ready() wordt alleen uitgevoerd als de pagina Document Object Model (DOM) gereed is om JavaScript-code uit te voeren. Dit omvat geen afbeeldingen, scripts, iframes enz. jQuery ready-gebeurtenis

Dus de jQuery ready-methode wordt eerderuitgevoerd dan de dom onload-gebeurtenis.


Antwoord 17

De tijd vliegt, het is nu ECMAScript 2021 en IE11 wordt steeds minder door mensen gebruikt. De meeste twee gebeurtenissen daarentegen zijn loaden DOMContentLoaded.

DOMContentLoadedwordt geactiveerd nadat het initiëleHTML-document volledig is geladen en geparseerd.

loadwordt geactiveerd nadat DOMContentLoadeden de hele pagina is geladen,
wachten tot alle afhankelijke bronnen zijn geladen. Voorbeeld van bronnen: scripts, stylesheets, afbeeldingen en iframes enz.

BELANGRIJK: Synchrone scripts pauzeren het ontleden van de DOM.

Beide gebeurtenissen kunnen worden gebruikt om te bepalen welke DOM kan gebruiken of niet. Voor voorbeelden:

<script>
    // DOM hasn't been completely parsed
    document.body; // null
    document.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.querySelector('#id');
        document.body.appendChild();
    });
    /**
     * Should be used only to detect a fully-loaded page.
     * 
     * If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
     */
    window.addEventListener('load', () => {
        // Safely manipulate DOM too
        document.links;
    });
</script>

Other episodes