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