[JQUERY] Preload Immagini!

16-01-2015, 04.54.06

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.

**alemoppo** · 16-01-2015, 23.51.39

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!

**dreadnaut** · 17-01-2015, 14.30.50

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

21-01-2015, 03.41.41

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

**alemoppo** · 21-01-2015, 03.55.58

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>

Discussione: [JQUERY] Preload Immagini!

LinkBack

Strumenti discussione

Display

[JQUERY] Preload Immagini!

Regole di scrittura