Oct 232012
 

Quasi sempre creando una pagina e lavorando su di essa con jQuery andremo a mettere il codice da eseguire all’interno del document.ready
ovvero faremo in modo che le varie attività, come per esmepio binding degli eventi siano disponibili solo una volta che il browser abbia effettivamente caricato il DOM.
Per far questo abiamo due possibilità $(function) o il più esteso e autodescrittivo $(docuemnt).ready, ma sono equivalenti.
Altra cosa invece è porsi il problema di quando sia terminato il download delle risrose collegate alla pagina, come per esempio immagini:
in questo caso disponiamo solo dell’evento load, nel tutorial scritto con jQuery e con js nativo, ma che è deprecato in quanto non sufficientemente consistente nei vari browser e non sempre affidabile per via di interferenze di cache (per approfondimento).

Il codice seguente “prende i tempi” di caricamento:

</pre>
<pre id="line1">var date=new Date();
var start=date.getTime();

$(function(e) {
	var date0=new Date();
	var start0=date0.getTime();
	$('#box0').text(start0-start);
	});
$(document).ready(function(e) {
	var date1=new Date();
	var start1=date1.getTime();
	$('#box1').text(start1-start);
	});
$(window).load(function(){
	var date2=new Date();
	var start2=date2.getTime();
	$('#box2').text(start2-start);
	})
window.onload=function(){
	var date3=new Date();
	var start3=date3.getTime();
	$('#box3').text(start3-start);
	}


 

</pre>
<pre id="line1"><p>$(function(){})</p>
<div id="<a>box1</a>"></div>
<p>Document ready</p>
<div id="<a>box1</a>"></div>
<p>$(window).load [deprecated]</p>
<div id="<a>box2</a>"></div>
<p>window.onload</p>
<div id="<a>box3</a>"></div>
<img src="<a href="view-source:http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif">http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif</a>" />

L’esempio

Sorry, the comment form is closed at this time.