imagesLoaded gets backgrounds

30 Oct 2015 · by David DeSandro

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.

Metafizzy socks

Metafizzy socks

Now for sale! Rainbow colors, cutie bear face, knit with comfy-soft cotton threads. Makes a great gift. Everyone wears socks.