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>
<script>
$('.bg-img').bgLoaded();
</script>

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();
$('.bg-img').bgLoaded({
  afterLoaded : function(){
   this.addClass('bg-loaded');
   $('#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.