fade?

Come creare un effetto di caricamento a step in fade di immagini attraverso la libreria jQuery! Provare per credere!

Fade Immagini



Come creare un effetto di caricamento a step in fade di immagini?

In primo luogo, creiamo la pagina HTML. Abbiamo bisogno di includere la libreria jQuery nell’intestazione della pagina. E facciamo avvolgere ogni immagine con un div.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Visual Preload Immagini usando jQuery</title> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
</head>

Inserisco lo Script

Aggiungendo lo script permetto di creare lo script preloader falso e lo inserirsco sul colpo.

<!-- IMG FADE ARTWORK --> 
<script type="text/javascript"> $(function () { $('img').hide(); //elimino tutte le immagini nella pagina }); 
var i = 0;//inizializzo 
var int=0;//Internet Explorer Fix $(window).bind("load", function() 
{//L'evento load verrà generato solo se l'intera pagina o documento è completamente caricato 
var int = setInterval("doThis(i)",500);//500 questa é la velocità el fade calcolata in millisecondi }); function doThis() 
{ var imgs = $('img').length;// Qui conto il numero di immagini presenti nella pagina if (i >= imgs) {// Loop delle immagini clearInterval(int);// Quando si raggiunge l'ultima immagine del ciclo termina } $('img:hidden').eq(0).fadeIn(500);// Sfuma nelle immagini nascoste uno per uno i++;// Inserisco 1 al conteggio } </script> <!-- FINE IMG FADE -->

Ora posso aggiungere il preloader animato. Si può generare la propria immagine di caricamento qui. Creiamo un nuovo file CSS nel nostro editor di codice preferito.

.image-holder{ float:left; width:500px; height:313px; padding:10px; margin:10px; border:1px solid #ddd; background:#eee url(loading.gif) 50% 50% no-repeat; display:inline; }

Non dimenticare di inserire il tuo css document dentro l’header di pagina:

<link rel="stylesheet" href="preloader.css" type="text/css" />

Sommario e conclusioni

Anche se sappiamo a priori che questa non è una vera soluzione per precaricare immagini, in questo modo possiamo aggiungere un effetto davvero cool al nostro sito Web. Questo metodo precarica qualsiasi immagine da qualsiasi fonte o percorso. Il solo difetto è che non vedrete il preloader animato su immagini non avvolte nel DIV css .image-holder, ma se state cercando un tutorial o uno script che precarica le immagini in modo sequenziale e ordinato, questo script fà per voi. Questo è tutto! Spero che vi piaccia il semplice demo / tutorial. Se avete domande o suggerimenti, si possono lasciare i vostri commenti qui sotto.

Chi è artwork?


ArtWork è una web agency con sede a Milano Centro. Specializzata nello studio, progettazione, sviluppo e realizzazione siti internet ottimizzati per i motori di ricerca, web design, restyling e ristrutturazione di siti internet esistenti, grafica e blog per il web, studio e realizzazione di marchi e logo, servizi internet. Creazione siti internet e sviluppo pagine web per qualsiasi esigenza, dalla semplice pagina al sito completo. Non smettiamo mai di imparare e il nostro obiettivo é quello di dedicare a Voi la nostra esperienza nel settore.