BG image préchargement dans JQuery

Question

J'ai un tableau d'images

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"]; 

Je suis à vélo à travers ce tableau et en les rendant l'arrière-plan d'un div basé sur un intervalle

$("#bgimg" + activeContainer).css({ 
     "background-image" : "url(" + photos[i] + ")", 
     "display" : "block", 
     "z-index" : currentZindex 
    }); 

EDIT: Je dois pour précharger les trois images avant de faire ma fonction setInterval.

Merci d'avance !!

Answer 1

Définissez une variable sur le nombre d'images à charger. Décrémentez le compteur chaque fois qu'une image se termine et lorsque le compteur atteint zéro, commencez à montrer les images.

function photoLoaded() { 
    if(!--numPhotosLeft) { 
     // start showing images 
    } 
} 

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"]; 
var numPhotosLeft = photos.length; 

for(var i = 0; i < photos.length; ++i) { 
    var img = new Image(); 
    img.onload = photoLoaded; 
    img.src = photos[i]; 
} 

Answer 2

Vous pouvez le faire:

var imgCount = images.length; 
var counter = 0; 
$.each(images, function(i, n) { 
    // load each image 
    $("<img />").attr("src", n) 
       .load(function() { 
        counter++; 
        if(imgCount == counter) { 
        // all images have loaded 
        // call setInterval 
        } 

       }); 
}); 

Answer 3

(function($) { 
    var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"]; 

    var i = 0; 
    function preloadImage() { 

     var image = new Image(); 

     image.onload = function() { 
      $("#bgimg" + activeContainer).css({ 
       "background-image" : "url(" + photos[i] + ")", 
       "display" : "block", 
       "z-index" : currentZindex 
      }); 

      i++; 
      preloadImage(); 
     }; 

     image.src = photos[i]; 


    }; 

}(jQuery); 

Cette volonté ...

1. charger votre image
2. il réglé sur fond de votre récipient
3. Répéter l'opération avec l'image suivante