Responsive image placeholders
Lazy and conditional image loading is a pretty common design pattern and more or less a necessity for larger responsive sites. The most common implementations swap a placeholder for the loaded image, either by using an element as a marker, E.G.
<div data-image="*"> or an image tag with a temporary source. The problem is that neither of these are particularly well suited to a flexible layout, both techniques will require a costly reflow on image load.
This technique requires a wrapper as well as a marker. The inner width of the wrapping block will be used to create the placeholder and any layout should be applied to it, unless the image is intended to sit as a full-width block. Attributes to be transferred to the replacement image element are specified as data attributes on the marker.
CSS margin and padding percentage values are calculated based on the width of the containing block and this effect is used to create the placeholder itself. The technique relies on knowing the aspect ratio of the target image which I think is fine in the majority of cases.
No monolithic library is required, the core of this technique is just plain old (in both senses) JS. In future it could be updated to use the ES5 array
dataset APIs but they offer no immediately useful benefits here other than providing nice, terse syntax. The script adds classes to imply state and act as hooks for styling. Importantly, the
onload event listener is applied before the
src attribute to avoid it not being triggered in legacy Internet Explorer in the case that an image is loaded from the cache.
No one wants to see preloaders on the web now but it’s preferable to infer something is loading than to leave a rectangular gap, especially on flaky connections where multiple requests can cause issues. There’s no loading .gif files here though, instead leveraging pseudo-elements and keyframe animations to create a little loading bobble that will be smooth and resolution independent.
Conditionally loading images is a key performance technique, whether it’s for loading images of a different resolution or deciding if a browser cuts the mustard. The extra performance of minimising layout re-calculation can make an appreciable difference.