background-image preloader using jQuery

Question

I'm working on a site that is very background-image intensive. Since some of the images are large, the aesthetic appeal of the page will inevitably suffer at the initial load, probably for several seconds.

So I'm trying to make a background-image preloader with jQuery and here's where I'm at:

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

        }
    });
});

I'm used an array of Image() objects, to load the image using the path pulled from my iterator, but I'm lost on where to go from here.

How can I determine when all of the images in the array have 'loaded', so that I can call a function to fade out a preloader curtain or something?

karim79 · Accepted Answer · 2010-12-17 04:10:22Z

3

You should be able to pull off something like this (untested!):

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

edited Dec 17, 2010 at 4:10

answered Dec 10, 2010 at 17:32

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

karim79 Over a year ago

I have to head out for about half an hour, so I won't be able to respond during that time.

Nilloc Over a year ago

have you thought about just using progressive JPGs, so that they display low quality and get better as they load?

Dan Lugg Over a year ago

@Nilloc: Yes, but for this implementation, a preloader is almost necessary to maintain the aesthetic appeal of the site/page. Progressive loading would make it look progressively less crappy :)

Banning Over a year ago

I really liked this unfortunately in Chrome it doesn't seem to fire off inside the bgImages.load function

Banning Over a year ago

Safari acts the same as chrome too

Josiah Ruddell · Accepted Answer · 2010-12-10 17:24:42Z

1

Here are a few resources to look at:

If you use a DOM element instead of Image you can watch the 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 */})

answered Dec 10, 2010 at 17:24

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

Comments

ShadoW · Accepted Answer · 2013-02-26 18:01:56Z

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

Dan Lugg · Accepted Answer · 2010-12-15 08:20:30Z

Thanks to karim79 and Josiah Ruddell. I've solved it for the time being, using a bit of a hybrid from suggestions and trial and error:

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

Collectives™ on Stack Overflow

background-image preloader using jQuery

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related