предзагрузчик фоновых изображений с помощью jQuery - PullRequest
Новая
       1

предзагрузчик фоновых изображений с помощью jQuery

5 голосов
/ 10 декабря 2010

Я работаю на сайте, который очень интенсивно использует фоновые изображения.Поскольку некоторые изображения имеют большой размер, эстетическая привлекательность страницы неизбежно пострадает при начальной загрузке, возможно, в течение нескольких секунд.

Поэтому я пытаюсь создать предварительный загрузчик фоновых изображений с помощью 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() объектов, чтобы загрузить изображение, используя путь, извлеченный из моего итератора, но я потерян накуда идти отсюда.

Как я могу определить, когда все изображения в массиве «загружены», чтобы я мог вызвать функцию для затухания шторки прелоадера или чего-то еще?

Ответы [ 4 ]

3 голосов
/ 10 декабря 2010

У вас должно получиться что-то вроде этого (не проверено!): 

$(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");
   });
});
1 голос
/ 26 февраля 2013 
   // 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');
    });
1 голос
/ 10 декабря 2010

Вот несколько ресурсов для просмотра:

Если вы используете DOM element вместо Image, вы можете посмотреть изображение onload callback 

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 */})
0 голосов
/ 15 декабря 2010

Благодаря karim79 и Джозии Рудделл .Я решил это пока, используя немного гибрида из предложений, проб и ошибок: 

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