At the moment the lazy-load images implementation is relatively complex. Part of that complexity is various a border, border-box modifications, and background-color/opacity animations.
I assume that this complexity is the reason the implementation also adds the image to the page layout //after// it has completely finished loading.
Normally in browsers, without lazy-loading, an `<img>` is interpreted by the browser as a target canvas on which to progressively render the image data as it comes in.
The browser does this in a way that is friendly with render performance (e.g. no forced re-rendering for every bit of data that arrives, but it doesn't wait for all data to arrive, either).
This means the user sees (parts of) the image even if the download takes a while and/or if the connection is spotty.
I strongly recommend that we either:
* Reduce layout complexity and make the is-visible handler simply replace the placeholder with the target `<img>` (like we do in the Grade C fallback).
* Or; Figure a way to do it in the current layout.
I'm recommending the former and re-evaluate the added value of the CSS animations for a later iteration.