Placeholder background/image while waiting for full image to load?

Instead of referencing the image directly, stick it within a DIV, like the following:

<div class="placeholder">
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>

Then in your CSS:

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}

Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.

A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).

<div style="width:100%;height:0; padding-top:50%;position:relative;">
  <img  src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>

Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.

There is a really simple thing to check before you start looking into lazy-loading and other JavaScript. Make sure the JPEG images you are loading are saved with the 'progressive' option enabled!

This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest resolution data before rendering.

Feel free to copy this:

<script>
    window.addEventListener("load", function () {
        document.getElementById('image').style.backgroundColor = 'transparent';
    });
</script>

<body>
    <image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>

I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.

Placeholder background/image while waiting for full image to load?

Related

Recent Posts