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

Hva er forskjellene mellom JavaScripts window.onload og jQuerys $ (document).ready()-metode?

Svar #1

Hendelsen ready oppstår etter at HTML-dokumentet er lastet, mens hendelsen onload oppstår senere, når alt innhold (f.eks. bilder) også er lastet.

onload-hendelsen er en standardhendelse i DOM, mens ready-hendelsen er spesifikk for jQuery. Hensikten med ready-hendelsen er at den skal oppstå så tidlig som mulig etter at dokumentet har lastet, slik at kode som legger til funksjonalitet til elementene på siden ikke trenger å vente på at alt innhold skal lastes.

Svar #2

window.onload er den innebygde JavaScript-hendelsen, men siden implementeringen hadde subtile forskjeller på tvers av nettlesere (Firefox, Internet Explorer 6, Internet Explorer 8 og Opera), tilbyr jQuery document.ready, som skjuler disse forskjellene, og utløses så snart sidens DOM er klar (venter ikke på bilder osv.).

$ (document).ready (merk at det ikke er document.ready, som er udefinert) er en jQuery-funksjon, som pakker inn og gir konsistens til følgende hendelser:

  • DOMContentLoaded - en relativt ny hendelse som utløses når dokumentets DOM er lastet (noe som kan være en stund før bilder osv. er lastet); igjen, litt annerledes i Internet Explorer og i resten av verden
  • og window.onload (som er implementert selv i gamle nettlesere), som utløses når hele siden lastes (bilder, stiler osv.)

Svar #3

$ (document).ready() er en jQuery-hendelse. Jquerys $ (document).ready()-metode blir kalt så snart DOM-en er klar (som betyr at nettleseren har analysert HTML-en og bygget DOM-treet). Dette lar deg kjøre kode så snart dokumentet er klart til å manipuleres.

For eksempel, hvis en nettleser støtter DOMContentLoaded-hendelsen (som mange ikke-IE-nettlesere gjør), vil den utløses ved den hendelsen. (Merk at DOMContentLoaded-hendelsen først ble lagt til i IE i IE9+.)

To syntakser kan brukes for dette:

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

Eller den forkortede versjonen:

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

Hovedpunkter for $ (document).ready():

  • Den vil ikke vente på at bildene skal lastes inn.
  • Brukes til å kjøre JavaScript når DOM er fullstendig lastet. Sett hendelsesbehandlere her.
  • Kan brukes flere ganger.
  • Erstatt $ med jQuery når du mottar "$ er ikke definert."
  • Ikke brukt hvis du vil manipulere bilder. Bruk $ (window).load() i stedet.

window.onload() er en innebygd JavaScript-funksjon. window.onload()-hendelsen utløses når alt innholdet på siden din er lastet, inkludert DOM (document object model), bannerannonser og bilder. En annen forskjell mellom de to er at, mens vi kan ha mer enn én $ (document).ready()-funksjon, kan vi bare ha én onload-funksjon.

Svar #4

Et lite tips:

Alltid bruk window.addEventListener for å legge til en hendelse på vinduet. Fordi på den måten kan du kjøre koden i forskjellige hendelseshåndterere.

Korrekt kode:

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

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

Ugyldig kode:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Dette er fordi onload bare er en egenskap ved objektet, som blir overskrevet.

Ved analogi med addEventListener er det bedre å bruke $ (document).ready() i stedet for onload.

Svar #5

En Windows load-hendelse utløses når alt innhold på siden din er fullstendig lastet, inkludert DOM (document object model)-innhold og asynkron JavaScript, frames og bilder. Du kan også bruke body onload=. Begge er det samme; window.onload=function(){} og <body onload="func();"> er forskjellige måter å bruke den samme hendelsen på.

jQuery $document.ready-funksjonshendelsen kjører litt tidligere enn window.onload og kalles når DOM (Document Object Model) er lastet på siden din. Den vil ikke vente på at bilder og rammer skal lastes helt.

Tatt fra følgende artikkel: hvordan $document.ready() er forskjellig fra window.onload()

Svar #6

$(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>

Svar #7

$ (document).ready() er en jQuery-hendelse som skjer når HTML-dokumentet er fullt lastet, mens window.onload-hendelsen skjer senere, når alt inkludert bilder på siden er lastet.

Også er window.onload en ren JavaScript-hendelse i DOM, mens $ (document).ready()-hendelsen er en metode i jQuery.

$ (document).ready() er vanligvis innpakningen for jQuery for å sikre at alle elementene er lastet inn slik at de kan brukes i jQuery...

Se på jQuery-kildekoden for å forstå hvordan det fungerer:

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

Jeg har også laget bildet nedenfor som en rask referanse for begge:

Svar #8

Et lite forbehold om bruk av $ (document).ready() med Internet Explorer. Hvis en HTTP-forespørsel avbrytes før hele dokumentet er lastet (for eksempel mens en side streames til nettleseren og en annen lenke klikkes), vil IE utløse $ (document).ready-hendelsen.

Hvis noen kode innenfor $ (document).ready()-hendelsen refererer til DOM-objekter, finnes det en mulighet for at disse objektene ikke blir funnet, og JavaScript-feil kan oppstå. Enten beskytter du referansene til disse objektene, eller utsetter kode som refererer til disse objektene til window.load-hendelsen.

Jeg har ikke klart å gjenskape dette problemet i andre nettlesere (spesielt Chrome og Firefox)

Svar #9

Arrangementer

$ (document).on('ready', handler) binder seg til ready-hendelsen fra jQuery. Handleren blir kalt når DOM-en er lastet. Ressurser som bilder kan fortsatt mangle. Den vil aldri bli kalt hvis dokumentet er klart på tidspunktet for binding. jQuery bruker DOMContentLoaded-hendelsen for dette, og emulerer den hvis den ikke er tilgjengelig.

$ (document).on('load', handler) er en hendelse som vil bli utløst når alle ressurser er lastet fra serveren. Bilder er lastet nå. Mens onload er en rå HTML-hendelse, er ready bygget av jQuery.

Funksjoner

$ (document).ready(handler) er faktisk et løfte. Handleren vil bli kalt umiddelbart hvis dokumentet er klart på tidspunktet for kall. Ellers bindes det til ready-hendelsen.

Før jQuery 1.8 eksisterte $ (document).load(handler) som et alias for $ (document).on('load',handler).

Videre lesning

  • Tidsberegningen
  • Når funksjonen er klar
  • Et eksempel
  • Løfter
  • Den fjernede hendelsesaliasen

Svar #10

window.onload: En vanlig JavaScript-hendelse.

document.ready: En spesifikk jQuery-hendelse når hele HTML-en er lastet.

Svar #11

En ting å huske (eller skal jeg si gjenkalle) er at du ikke kan stable onloads slik du kan med ready. Med andre ord, jQuery-magi tillater flere readys på samme side, men du kan ikke gjøre det med onload.

Den siste onload vil overstyre alle tidligere onload.

En fin måte å håndtere det på er med en funksjon tilsynelatende skrevet av en Simon Willison og beskrevet i Using Multiple JavaScript Onload Functions.

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

Svar #12

Document.ready (en jQuery-hendelse) vil utløses når alle elementene er på plass, og de kan refereres til i JavaScript-koden, men innholdet er ikke nødvendigvis lastet. Document.ready kjøres når HTML-dokumentet er lastet.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Derimot vil window.load vente på at siden skal være fullstendig lastet. Dette inkluderer indre rammer, bilder, osv.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

Svar #13

document.ready-hendelsen oppstår når HTML-dokumentet har blitt lastet inn, og window.onload-hendelsen oppstår alltid senere, når alt innhold (bilder osv.) har blitt lastet inn.

Du kan bruke document.ready-hendelsen hvis du vil gripe inn "tidlig" i gjengivelsesprosessen, uten å vente på at bildene skal lastes. Hvis du trenger at bildene (eller annet "innhold") er klare før skriptet ditt "gjør noe", må du vente til window.onload.

For eksempel, hvis du implementerer et «Slide Show»-mønster, og du trenger å utføre beregninger basert på bildestørrelser, kan det være lurt å vente til window.onload. Ellers kan du oppleve noen tilfeldige problemer, avhengig av hvor raskt bildene blir lastet inn. Skriptet ditt vil kjøre samtidig med tråden som laster bilder. Hvis skriptet ditt er langt nok, eller serveren er rask nok, kan det hende du ikke merker et problem, hvis bildene tilfeldigvis ankommer i tide. Men den sikreste praksisen ville være å tillate at bildene blir lastet inn.

document.ready kan være en fin hendelse for deg å vise et «laster...»-skilt til brukerne, og ved window.onload kan du fullføre eventuelle skript som trenger lastede ressurser, og deretter til slutt fjerne «Laster...»-skiltet.

Eksempler :-

// 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;

Relaterte artikler