preloader de fondo de imagen usando jQuery

Question

Estoy trabajando en un sitio que es muy intensivo de imágenes de fondo. Como algunas de las imágenes son grandes, el atractivo estético de la página sufrirá inevitablemente a la carga inicial, probablemente durante varios segundos.

Así que estoy tratando de hacer un preloader Imagen de fondo con jQuery y aquí es donde estoy:

$(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)); 

     } 
    }); 
}); 

Estoy acostumbrado un conjunto de objetos Image(), a carga la imagen utilizando el camino extraído de mi iterador, pero estoy perdido en hacia dónde ir desde aquí.

¿Cómo puedo determinar cuándo se han 'cargado' todas las imágenes de la matriz, de modo que puedo invocar una función para atenuar una cortina preloader o algo así?

Answer 1

Usted debe ser capaz de lograr algo como esto (no probado!):

$(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

Éstos son algunos recursos para tener en cuenta:

• Image Preloader
• Preloader with Callback

Si utiliza un DOM element en lugar de Image se puede ver la imagen onload devolución de llamada

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

Gracias a karim79 y Josías Ruddell. He resuelto que, por el momento, con un poco de un híbrido de las sugerencias y ensayo y error:

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'); 
    });