Tutorialdock | Free Web Resources

jQuery: velocizzare l’apertura delle pagine

| di:

jquery questions indeas jQuery: velocizzare lapertura delle pagine

Per migliorare, in termini di prestazioni, la velocità di apertura delle pagine del proprio blog può essere utile intervenire sulle immagini.

Un primo accorgimento è cercare di ridurre il peso delle stesse, riconoscendo se sia opportuno il formato PNG o JPG relativamente al tipo di immagini in questione.

Se ciò non dovesse essere sufficiente, evitando i numerosi sistemi di caching abbastanza difficili da capire, potrebbe essere utile ritardare il caricamento delle immagini al momento in cui vengono fisicamente visualizzate, ovvero quando appaiono all’interno della finestra.

Il plugin che ci viene in aiuto in questo caso è Sonar, che permette di capire se un oggetto è visibile all’utente oppure no.

Il codice

Dato che è un plugin JQuery, necessitiamo del framework, quindi possiamo fare in due modi: o scarichiamo il file da qui e poi lo colleghiamo tramite <script scr=” eccetera, oppure (come preferisco) lo colleghiamo semplicemente, senza dover scaricare nulla, attraverso questo codice:

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>

Poi dobbiamo scaricarci il file jquery.sonar.min.js, salvarlo nella stessa directory del file in cui abbiamo le nostre immagini (oppure in una sotto-directory, indicandola nel link), e lo colleghiamo attraverso questo codice:

<script src="jquery.sonar.min.js" type="text/javascript"></script> <!-- Se è in una sotto directory basta cambiare src="jquery.sonar.min.js" in src="sottodirectoy/jquery.sonar.min.js" -->

Ora basterà scrivere questo codice, prima della fine del tag body (</body>) o del tag head (</head>):

<script type="text/javascript">
(function($){
	$(document).ready(function(){
	$('img').each(function(){
		firstsrc=$(this).attr('src');
		newsrc='x.gif';
		$(this).attr('src',newsrc)
		$(this).attr('data-src',firstsrc);
	});
		
		
	});
	$("img").bind("scrollin", function(){
		

		var img = this,
			$img = $(img);
		
		$img.unbind("scrollin"); // clean up binding
		img.src = $img.attr( "data-src" );
		$img.removeAttr('data-src');
	});
})(jQuery);
</script>

Dove x.gif è il nome della gif che appare al posto dell’immagine.

L’event scrollin è settato dal plugin e permette di capire il momento in cui l’immagine o l’oggetto appare all’utente. Il plugin mette a disposizione anche l’event scrollout per capire quando un elemento non è più visibile.

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente