After background image loaded

A simple lightweight jQuery plugin that detects when an elements background image has fully loaded.

By default a "bg-loaded" class gets applied to the element(s) that the plugin is called on, once any background images applied to the element have loaded.

Target a group of elements

You can maike multiple elements wait for their background to load by simply including them in your jQuery call, for example:

<div class="bg-img"></div>
<div class="bg-img"></div>
<div class="bg-img"></div>

Custom callback

If you want to you can overite the class being applied with your own custom function (see example below).

// Example with different callback function
var startTime = new Date().getTime();
  afterLoaded : function(){
   $('#output').append(this.attr('id')+' took '+Math.round((new Date().getTime() - startTime))+'ms <br>');

Download plugin

See the Pen bgLoaded plugin by Jon Catmull (@catmull) on CodePen.