Hintergrund-Bild Preloader mit jQuery

Question

Ich arbeite auf einer Website, die sehr Hintergrund-Bild intensiv ist. Da einige der Bilder groß sind, wird die Ästhetik der Seite bei der anfänglichen Belastung, wahrscheinlich für einige Sekunden, unweigerlich leiden.

Also ich versuche, ein Hintergrund-Bild preloader mit jQuery zu machen und hier bin, wo ich bin:

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

     } 
    }); 
}); 

Ich bin eine Reihe von Image() Objekten, zu Last das Bild verwendet, unter Verwendung von Der Weg zog sich von meinem Iterator zurück, aber ich weiß nicht, wohin ich von hier aus gehen soll.

Wie kann ich feststellen, wann alle Bilder im Array 'geladen' haben, damit ich eine Funktion aufrufen kann, um einen Preloader-Vorhang auszublenden?

Answer 1

sollten Sie in der Lage sein, etwas abziehen so (ungetestet!):

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

Hier sind ein paar Ressourcen zu betrachten:

• Image Preloader
• Preloader with Callback

Wenn Sie ein DOM element statt Image verwenden können Sie das Bild onload Rückruf beobachten

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

Dank karim79 und Josiah Ruddell. Ich habe es für den Augenblick gelöst, ein bisschen wie ein Hybrid aus Anregungen und Versuch und Irrtum mit:

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