préchargeur de fond d'image utilisant jQuery

Question

Je travaille sur un site très intensif en arrière-plan. Comme certaines des images sont grandes, l'attrait esthétique de la page va inévitablement souffrir à la charge initiale, probablement pendant plusieurs secondes.

Je suis en train de faire un préchargement image de fond avec jQuery et est là où je suis:

$(document).ready(function(e){ 
    $('*') 
    .each(function(){ 
     if($(this).css('background-image') != 'none'){ 

      //so, i can get the path, where do i go from here? 
      alert($(this).css('background-image').slice(5, -2)); 

     } 
    }); 
}); 

Je suis utilisé un tableau de Image() objets, à charge l'image en utilisant le chemin a tiré de mon itérateur, mais je suis perdu sur où aller d'ici.

Comment puis-je déterminer si toutes les images de la matrice ont été «chargées», de sorte que je puisse appeler une fonction pour faire disparaître un rideau de préchargement ou autre chose?

Answer 1

Vous devriez être en mesure de retirer quelque chose comme ça (non testé!):

$(document).ready(function(e){ 

    // get a collection of all elements with a BG image 
    var bgImages = $('*').filter(function(){ 
     return $(this).css('background-image') != 'none'); 

    // get a collection of new images, assigning the sources from the original collection 
    }).map(function() { 
     return $("<img />").attr("src", $(this).css('background-image').slice(5, -2)); 
    }); 

    var len = bgImages.length; 
    var loadCounter = 0; 

    // use an onload counter to keep track of which ones have loaded 
    bgImages.load(function() { 
     loadCounter++; 
     if(loadCounter == len) { 

     // we have all loaded 
     // fade out curtain 
     } 
    }).each(function() { 

     // if we have been pulled up from cache, manually trigger onload 
     if (this.complete) $(this).trigger("load"); 
    }); 
}); 

Answer 2

Voici quelques ressources pour regarder:

• Image Preloader
• Preloader with Callback

Si vous utilisez un DOM element au lieu de Image vous pouvez regarder l'image onload rappel

var path = $(this).css('background-image').slice(5, -2); 
var img = document.createElement('img'); 
img.src = path; 
$(img).load(function(){ /* incrament counter for loaded images */}) 

Answer 3

Merci à karim79 et Josiah Ruddell. Je l'ai résolu pour l'instant, en utilisant un peu d'un hybride de suggestions et de tâtonnements:

var preloaderTotal = 0; 
    var preloaderLoaded = 0; 
    var preloaderCurrent = null; 

    $('#preloaderCurtain') 
     .bind('preloaderStart', function(){ 
      $(this) 
       .show(); 
      $('*') 
       .filter(function(e){ 
        if($(this).css('background-image') != 'none'){ 
         preloaderTotal++; 
         return true; 
        } 
       }) 
       .each(function(index){ 
        preloaderCurrent = new Image(); 
        preloaderCurrent.src = $(this).css('background-image').slice(5, -2); 
        preloaderCurrent.onload = function(e){ 
         preloaderLoaded++; 
         if(preloaderLoaded == preloaderTotal - 1){ 
          $('#preloaderCurtain') 
           .trigger('preloaderComplete') 
         } 
         $('#preloaderCurtain') 
          .trigger('preloaderProgress') 
        }; 
       }); 
     }) 
     .bind('preloaderComplete', function(){ 
      $(this) 
       .fadeOut(500) 
      startAnimation(); 
     }) 
     .bind('preloaderProgress', function(e){ 
      $('#preloaderProgress') 
       .css('opacity', 0.25 + (preloaderLoaded/preloaderTotal)) 
       .text(Math.floor((preloaderLoaded/preloaderTotal) * 100) + '%'); 
     }) 
     .trigger('preloaderStart'); 

Answer 4

// Get all backgrounds 
    var bgImages = $('*').filter(function() 
    { 
     return ($(this).css('background-image') != 'none'); 
    }) 
    // Create IMG objects for it 
    .map(function() 
    { 
     // Works in Chrome!!! Chrome not uses brackets near url() 
     return $('<img />').attr('src', $(this).css('background-image').replace(/\url|\(|\"|\"|\'|\)/g, '')); 
    }); 

    var len = bgImages.length; 
    var loadCounter = 0; 

    $(bgImages).each(function() 
    { 
     $(this).load(function() 
     { 
      loadCounter++; 
      console.log(loadCounter); // Look at console 
      if(loadCounter == len) { // ALL LOADED!!! } 
     }); 
    }) 
    // Cached trigger 
    .each(function() 
    { 
     if (this.complete) $(this).trigger('load'); 
    });