imagesLoaded now supports background images, finally.

Set { background: true } to detect when the element's background image has loaded.

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

See the Pen imagesLoaded - background by David DeSandro (@desandro) on CodePen.

Checking when images are loaded is a black magic. There are all sorts of quirks involved with how browsers load and display images. Cached images do not trigger a load event. Sometimes the load event is triggered before the image displays. Consequently, developing imagesLoaded is done with a fair amount of trepidation. With every fix and featured added, I worry two more issues will spring up in their place. That's why adding background images as a feature took over three years.

imagesLoaded v3.2.0 includes other improvements:

• Removed the internal buggy cache
• Address Firefox bugs
• Added .makeJQueryPlugin() for better compatibility with jQuery and Browserify/RequireJS/Webpack

imagesLoaded is the 58th most popular library on Libscore, used on over 30,000 sites. Seeing this stat made me realize that it is just more than a pet project — it is a public utility. imagesLoaded should work for everyone, not solely my own endeavors. Now with backgrounds, imagesLoaded can help more developers.