How to hide a div once an Image has loaded fully?

Question

I have been adding a loading spinner to my images on a page. To do this I have set a loading spinner as the background of a div that surrounds the images and once the images are loaded the background spinner is covered by the images.

The issue is some of my images have transparent centres so as a result part of the spinner comes through the image.

Is there a way of setting a div background to change to transparent (or something else that would remove/hide the spinner) once an image has fully loaded?

If there was a way of triggering javascript once the image is fully loaded that would work by setting the javascript to say something like document.getElementById('loading').style.background = "transparent"; I just don't know if that's possible as my javascript knowledge is very minimal.

Thanks

Answer 1

You are trying to emulate a sort of "lazyload" but there isn't in JS an event to listen.

For those type of events, you need to "pass" the image in the JS code. For example:

var img = document.createElement("img");

img.src = "path/to/image.png";

img.onload = function() {
    console.log("Image loaded");
    yourParentElement.appendChild(img);
}

or use a library that does this for you like: https://github.com/verlok/vanilla-lazyload

Answer 2

You can listen to the DOMContentLoaded event of the window. This will fire as soon as the text of the DOM is available, but before other externals resources such as scripts, images and style-sheets have loaded. NOTE: I've chosen not to use the more usual 'load' event of the window, because that wont fire until the images have loaded (or failed), which is probably too late. This code allows you to tell whether the image loaded or failed, as it happens . Perhaps you'd like to remove broken images from the DOM. You may prefer the 'load' event, knowing that the browser's done it's best and you've either got the images or a thumb of a broken image.

By doing this, we can inspect the DOM, count the number of images, attach a handler to each of them which will be called when they've either loaded or failed. We can decrement a counter inside this handler and once the counter reaches zero, take some pre-determined action.

Drawing from an answer to another question earlier (to make a 3d pic frame) You can see the effect below:

 "use strict"; window.addEventListener('DOMContentLoaded', DOMContentLoaded, false); function DOMContentLoaded(evt) { let allImages = Array.from( document.querySelectorAll('img') ); let numRemaining = allImages.length; allImages.forEach( img => img.onload = img.onerror = onImgDone ); function onImgDone(evt) { numRemaining--; if (numRemaining == 0) { var tmpMsg = document.querySelector('h1'); tmpMsg.remove(); } } }

 .box { --x: 10px; --y: 30px; --o:10px; clip-path:polygon( 0 calc(var(--x) + var(--y)),var(--y) var(--y), calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y))); -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0); mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0); margin: 30px; transform-origin: left; transform: perspective(1000px) rotateY(35deg); outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1); outline-offset: calc(-1*(var(--y) + var(--o))); }

 <h1>LOADIN G</h1> <img src="https://picsum.photos/id/1015/728/600" class="box">