jQuery: preload sequenziale delle immagini

jQuery: preload sequenziale delle immagini

Vogliamo caricare una serie di immagini in sequenza mostrando prima di ciascun immagine un effetto di preload ottenuto tramite una GIF animata. Con jQuery si tratta di concatenare delle animazioni. Vediamo come fare.

Partiamo dalla seguente struttura HTML:


<div id="thumbs">
	<figure>
		<img src="1-thumb.jpg" alt=""/>
    </figure>
    <figure>
	    <img src="2-thumb.jpg" alt=""/>
    </figure>
    <figure>
	    <img src="3-thumb.jpg" alt=""/>
    </figure>
    <figure>
	    <img src="4-thumb.jpg" alt=""/>
    </figure>
</div>

Aggiungeremo dinamicamente una GIF animata in ciascun blocco tramite jQuery. Quest'immagine deve essere inizialmente nascosta tramite i CSS:


#thumbs {
    margin: 2em;
    overflow: hidden;
}

#thumbs figure {
    float: left;
    margin-right: 1em;
}

#thumbs .loader {
    display: none;
}
​

Con jQuery dobbiamo usare un valore temporale incrementale che verrà sfruttato dalla funzione JavaScript setTimeout() per creare quell'effetto di ritardo tra un'animazione e l'altra:


var preload = function() {

    var i = 0;

    $('figure', '#thumbs').each(function() {
        var $figure = $(this);
        var loader = '<img src="loading.gif" class="loader"/>';
        $figure.append(loader);
    });

    $('img', '#thumbs').not('img.loader').each(function() {
        var $img = $(this);
        var $loader = $img.next();
        $img.hide();

        setTimeout(function() {
            $loader.fadeIn(i / 4, function() {

                $(this).hide();
                $img.fadeIn(200);

            });
        }, i += 800);

    });

};

preload();​

Le immagini vengono inizialmente nascoste. Quindi appare l'immagine di preload in un lasso di tempo pari ad 1/4 del valore di i, che è il nostro valore incrementato ad ogni passaggio del ciclo .each(). Infine appare l'immagine principale di ciascun blocco e la GIF animata scompare.

Torna su