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

以下是一些资源：

如果您使用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

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

Answer 4

感谢 karim79 和 Josiah 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');

使用jQuery的background-image预加载器

4 个答案: