Précharger des images avant les chargements de page Web

Question

c'est ma première question ici, alors pardonnez si quelque chose est demandé mal :) Je veux précharger 3 images avant que la page Web soit chargée ainsi toutes apparaîtraient dans le même moment. En ce moment, les images sont chargées les unes après les autres et il semble un peu saccadé. Une image est définie dans css(), les deux autres sont un simple élément "img". J'ai essayé de créer des objets d'image javascript - les images sont toujours chargées, j'ai essayé de les précharger dans l'affichage: none; div - encore agité. Que devrais-je faire?

Merci.

Answer 1

Cela fonctionne: (essayez ici: http://dl.dropbox.com/u/186012/demos/loadatonce/index.html)

<!-- jQuery is required --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<!-- the images --> 
<div class="showmetoo" style="background: url(jimhance-vader_inset.jpg)"> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div> 

<img class="showall" src="octopus3.jpg" alt="a picture"><br/> 
<img class="showall" src="moorea.jpg" alt="a picture"><br/> 

<!-- hidden by default --> 
<style> 
img.showall { visibility: hidden } 
div.showmetoo { visibility: hidden } 
</style> 



<!-- the script --> 
<script type="text/javascript"> 
var remaining = $('.showall').length; 

function showthem(){ 
    remaining--; 
    if(!remaining){ 
    $('.showall').css('visibility', 'visible'); 
    $('.showmetoo').css('visibility', 'visible'); 
    } 
} 

// bind the callback to the load event of the pictures. 
$('.showall').bind('load',showthem); 

// force the pictures to show (just in case) 
setTimeout(showthem, 1000); //just in case load event fires before callback is set. 
</script> 

Answer 2

Une solution simple consiste à utiliser des URIs de données http://css-tricks.com/data-uris/

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

Je pense que cela devrait probablement corriger.

Les URI de données ont certaines limitations en ce qui concerne IE, mais je pense que dans ce cas, vous devriez simplement appeler cela une dégradation gracieuse. :)

Editer: J'ai vu l'affichage de votre mention: aucun divs. L'affichage des non-div ne préchargera PAS vos images. Vous devez définir l'affichage pour bloquer et masquer le div d'une autre manière. Réglage de l'index z ou du décalage -9999 ou de certains d'entre eux.

Answer 3

La solution la plus simple est probablement d'afficher un gif de chargement pour les trois images jusqu'à ce qu'elles soient toutes chargées, puis de remplacer le gif par l'image réelle.