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

Question

I have a few images on my page. I\'m finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Ini

Answer 1

You can find the width and height of the images in the devtools console, for example in chrome you can click the cursor icon in the devtools console and when you hover on the page it will highlight all the properties of the elements in the page. This will help you find the width and height of the images because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:

the main div will contain the images and also the background-div which is below the image.

HTML:

CSS:

.mainDiv {
  position: relative;
}

.below {
  position: absolute;
  background: #96a0aa;
  width: 500px;
  height: 281px;
}

img {
  position: absolute;
}

The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed.And this will solve all you problems.