How to check if Background image is loaded - when the image is as a background url in a css file

Question

I have been looking at different answers on how to check if a background image has loaded, however, majority of them are for if the image is set in the html code.

I have my image as a background url in a css file:

.container{
    background-image: url(/images/rickandmorty.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

At the moment, the text is loading before the picture. Any way around it using javascript?

Thanks

Is this helpful? https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded/54462733#54462733 — Kanishk Anand, Nov 24 '21 at 17:12

score 0 · Answer 1 · answered Nov 24 '21 at 17:29

0

I'm not sure but you can try add onload event on html objet like this:

<div class="container" onLoad="myFunction">...</div>

answered Nov 24 '21 at 17:29

Germano Plebani

3,461
3
26
38

By CSS you cannot detect if a background is loaded. By Javascript you could detect of the page is loaded or if the data has become from the server. Usually text is loaded on the page before images, especially if the images are heavy. That's why loaders are shown while waiting for the images to load. You could try to search for how to preload an image to see if it's possible to somehow show an image before text. – Azu Nov 24 '21 at 18:46

score -1 · Answer 2 · answered Nov 24 '21 at 18:11

I know this is not what was asked - but I would like to advocate using images over background-images. It makes the implementation much more flexible (animations etc.), allows optimizing for resolution and device (srcset), provides better accessibility (alt tags), easy event listening etc.

To make images work like background you just need a picture wrapper and a bit of css (object-fit: cover)

Here is a small example using onload to trigger animation

function onImageLoaded() {
  document.querySelector('header').classList.add('loaded')
}

function onImageError() {
  alert('I\'m starting to work up some anxiety about this whole thing!')
}

* {
  box-sizing: border-box;
  position: relative;
}

header {
  aspect-ratio: 21/9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: white;
  text-shadow: 0 0 .25em rgba(0, 0, 0, 0.4);
  background: #869F63;
  z-index: 0;
  overflow: hidden;
}

picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  overflow: hidden;
}

picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  will-change: transform;
  transition: transform 2000ms;
  transform: translateY(50vh);
  opacity: 0;
}

img {
  will-change: transform;
  transition: transform 2000ms;
  transform: scale(2);
  opacity: 0;
}

.loaded h1,
.loaded img {
  transform: none;
  opacity: 1
}

<header>
  <picture>
    <img src="https://assets.codepen.io/68939/rickandmorty.png" width="680" height="380" alt="Rick & Morty...." onload="onImageLoaded()" onerror="onImageError()" />
  </picture>
  <h1>Rick & Morty</h1>
</header>

How to check if Background image is loaded - when the image is as a background url in a css file

2 Answers2