Vediamo come mettere la classica immagine di caricamento prima del immagine da visualizzare ottimo per la realizzazione di gallerie personalizzate.
Codice Html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Precaricamento delle immagini</title> <link href='style.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="load.js"></script> </head> <body> <div id="caricatore" class="caricamento"></div> </body> </html> |
Foglio di stile
|
1 2 3 4 5 6 7 |
div#caricatore { border: 1px solid; } div#caricatore.caricamento { background: url(./img/caricatore.gif) no-repeat center center; } |
JQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Quando il DOM(Document Object Model) è pronto! $(function () { var img = new Image(); $(img) //Una volta che immagine è stata caricata esegue questo codice. .load(function () { // Nascondo immagine $(this).hide(); $('#caricatore') //Rimuovo la classe caricamento .removeClass('caricamento') //Aggiungo la mia immagine .append(this); // Aggiungo un effetto di disolvenza al immagine $(this).fadeIn(); }) //Gestione Errori .error(function () { // Notifico che immagine non è stata caricata alert( "Immagine non caricata" ) }) // Imposto la src(sorgente) della nostra nuova immagine .attr('src', 'http://codematrix.altervista.org/wp-content/uploads/2012/11/schema.png'); }); |
