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 ML SOLUTION --> 
<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.

Chi è ML SOLUTION?
ML SOLUTION è un'azienda con sede a Caserta. Specializzata nello studio, progettazione, sviluppo e realizzazione di software e 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. Contattaci per avere più informazioni.

CONTATTI

INFO AZIENDA

ML SOLUTION S.R.L.S.