Question de préchargement d'image en général

Question

J'avais l'habitude de coder en javascript - jquery et PHP. J'aime avoir un dossier de, laissez 100 images, le scanner et l'obtenir à l'écran avec un fondu dans beetween, et retarder ... La plupart de cela peut être fait assez juste

La question: seulement pour la vitesse but, j'aime obtenir img1, montrer pré-charge img2 attendre 2-3 secondes fondu à iMG2 pré-charge img3 attendre ... et ainsi de suite ...

afin d'avoir seulement 2 charge d'image au le même temps est beaucoup plus rapide, et ne nécessite pas beaucoup de codage, il suffit de changer ce qui sera l'image suivante ...

Maintenant, avoir une image sur 100 le rend lent à charger, et je ne parle pas de 250! cela suffit de tuer l'ordinateur Toute idée

Je pense à ajax ad jquery tu changer de façon dynamique la référence img et la précharge .... toute idée quelqu'un ????

Answer 1

à jquery, vous pouvez faire de l'animation se fanent un rappel d'événement image.load

comme celui-ci (non testé)

 images = [ "one.jpg", "two.jpg" ...]; 
     divs = ["#first", "#second"]; 
     fore = 0; 

     function show() { 
      if(!images.length) return; 
      var back = 1 - fore; 
      $(divs[back]).html("<img>").find("img").attr("src", images.shift()).load(function() { 
       $(divs[fore]).fadeOut(); 
       $(divs[back]).fadeIn(); 
       fore = back; 
       setTimeout(show, 1000); 
      }); 
     } 

Answer 2

Lorsque vous affichez image1, demandez au navigateur de charger et de mettre en cache image2 en créant une balise d'image ou en utilisant l'objet image javascript. Lorsque vous êtes prêt à changer d'image, mettez à jour l'image principale de image1 à image2 (elle sera déjà dans le cache du navigateur, donc pas de délai). À ce stade, mettez à jour votre image cachée à image3 et attendez qu'elle soit complètement chargée.