[JQUERY] Preload Immagini!

Printable View

16-01-2015, 04.54.06

[JQUERY] Preload Immagini!

Salve ragazzi, vi scrivo perchè ho bisogno di aiuto! Questo maledetto jquery!
Mi spiego, sto cercando un codice per effettuare il preload delle immagini. Praticamente vorrei far comparire un MIO PERSONALE div con all'interno una gif, prima del caricamento di un immagine!

Mi spiego meglio, io nella mia home page, ho un immagine molto pesante, vorrei che prima del caricamento ci fosse lo schermo nero e la mia gif ( all'interno di un div che piazzerò in basso a destra ) e dopo che Jquery ha caricato l'immagine pesante, questo schermo nero vada via, e compaia la pagina!!Come devo fare? T_T
16-01-2015, 23.37.43

Crei la pagina mostrando solo l'immagine che vuoi mostrare (quella piccola, immagino una gif di tipo loading...).
Richiami tramite ajax l'immagine che vuoi mostrare (stavolta quella di grandi dimensioni) e a caricamento avvenuto (success) nascondi la gif e mostri l'immagine voluta.
16-01-2015, 23.51.39
alemoppo

Anche senza usare ajax, semplicemente così:

Codice:

<img src="loading.gif" id="immagine"> [...] <script> $('#immagine').attr('src','percorsoimmagine.jpg'); </script>

In generale, senza utilizzare jQuery, per precaricare una immagine è sufficiente una cosa del genere:

Codice:

immagine_precaricata = new Image(); immagine_precaricata.src="percorsoimmagine.jpg";

Ciao!
17-01-2015, 14.30.50
dreadnaut

Ti conviene anche usare un formato più adatto per un'immagine di quelle dimensioni salvandola come JPG. Arriverai facilmente ad un decimo delle dimensioni attuali senza perdere troppa qualità.

A quel punto la pagina caricherà in un tempo minore, e puoi fare anche a meno di caricare jQuery. Che poi è una pagina di transizione senza alcuna utilità, quindi i tuoi utenti saranno assai felici di togliersela di mezzo il più velocemente possibile. Potresti non metterla e fare loro un piacere :wink:
21-01-2015, 03.41.41

alemoppo : ho provato ad utilzzare il tuo script, ma non cambia niente, rimane quella di preload per sempre!
21-01-2015, 03.55.58
alemoppo

Hai sbagliato qualcosa. Questo ad esempio funziona:

Codice HTML:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title> Preload immagine </title> <script src="jquery.js"></script> <script type="text/javascript"> $(function() { $('#immagine').attr('src','http://forum.it.altervista.org/image.php?u=810792&dateline=1325037313&type=profile?ran='+Math.random()); }); </script> </head> <body> <img src="preload.gif" id="immagine" alt="immagine di prova"> </body> </html>