使用jQuery的背景圖像預加載器

Question

我正在處理非常背景圖像密集的網站。由於一些圖像很大，頁面的審美吸引力在最初的負載下將不可避免地受到影響，可能持續幾秒鐘。

所以我試圖與jQuery的背景圖像預加載和這裏的我在哪裏：

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

     } 
    }); 
}); 

我習慣Image()對象數組，以負載圖像使用從我的迭代器中拉出的路徑，但我失去了從這裏開始的路。

如何確定陣列中所有圖像何時「加載」，以便我可以調用某個函數來淡出預加載器窗簾或某種東西？

Answer 1

你應該能夠拉過像這樣的東西（未經測試！）：

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

這裏有一些資源來看待：

• Image Preloader
• Preloader with Callback

如果您使用的一個DOM element代替Image可以觀看圖像onload回調

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

由於karim79和約西亞Ruddell。我已經解決它暫時，使用位混合的從建議和反覆試驗：

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