Images Loaded for Background Images

BgImagesLoaded.js

/**
 * Assumes you are using the images loaded plugin by desandro
 * but you are not using inline <img> elements
 * but instead are using background images
 * but you need to use the images loaded functionality
 * for the background images
 * https://github.com/desandro/imagesloaded/
 */

// create a variable initialized to an image element (with jquery)
var $images = $('img');

// find all elements with a class of bg-img (replace with your class)
// and loop over each and create an img element (via jquery)
$('.bg-img').each(function(){
  var el = $(this), sources, image;
  // determine if there are one or more background images set on the element
  // via the elements css
  if(sources = el.css('background-image')){
    // for each image in the source list
    $.each(sources.split(','), function(i, source){
      // if the value is a value for and image source
      if(image = source.match(/url\((['"])?(.*?)\1\)/)){
        // create a new image element and set the src of the new image element
        // equal to the background image url from the source elements css style
        $images = $images.add($('<img>').attr('src', image.pop()));
      }
    });
  }
});

// now you'll call the imagesloaded plugin to indicate that all images are loaded
images.imagesLoaded();