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