Dacă dorești să execuți o funcție JavaScript sau o secvență de cod imediat după descărcarea structurii HTML a paginii, biblioteca jQuery oferă o soluție elegantă și consacrată: evenimentul ready.
În practica dezvoltării web, este recomandat ca majoritatea scripturilor jQuery care interacționează cu elementele din pagină să fie încapsulate în interiorul acestui handler. În acest fel, previi erorile comune ce apar atunci când codul încearcă să manipuleze elemente din DOM înainte ca browserul să fi finalizat randarea lor.
Sintaxa clasică: $(document).ready()
Forma standard completă este următoarea:
[javascript]
$(document).ready(function() {
// Aici introduci codul tău jQuery care va rula după încărcarea completă a DOM-ului
});
[/javascript]
Sintaxa prescurtată (shorthand)
În versiunile moderne de jQuery este utilizată frecvent și varianta prescurtată, având exact același comportament:
[javascript]
$(function() {
// Instrucțiunile se execută la încărcarea arborelui DOM
});
[/javascript]
Diferența dintre $(document).ready() și window.onload
Spre deosebire de evenimentul nativ JavaScript window.onload, care așteaptă descărcarea completă a tuturor resurselor externe (imagini de mari dimensiuni, clipuri video, cadre iframe), funcția $(document).ready() se declanșează mult mai rapid, imediat ce structura Document Object Model a fost parcursă și construită de browser. Acest lucru asigură o experiență mult mai receptivă și mai rapidă pentru vizitatori.
1 comentariu