How can I show an element while images load with JavaScript?

Question

I am trying to learn JavaScript.

I have a div class called pre-loader that covers the screen with a z-index higher than the images.

I would like my images to load first then hide the div. I'm not really clear on the JavaScript:

window.onload = function() {
document.getElementById(“preloader”).style.display =“block”;

I’m not sure if it should be the following to load all the images:

document.querySelectorAll('img');

I know there is an if statement

if images are loaded hide div.

or an addEventListener with an onload .

I’m trying to be as specific as possible. I’m not sure how to write it.

Thanks in advance,

Answer 1

// The "load" event only triggers after all resources have finished downloading
window.addEventListener("load", function(){

  // Hide the preloader
  document.querySelector(".preloader").classList.add("hidden");

  // Put the images collection into a proper Array
  var imgArry = Array.prototype.slice.call(document.querySelectorAll("img"));
  
  // Loop through images array
  imgArry.forEach(function(i){
    // Unhide image
    i.classList.remove("hidden");
     
    // Animate image after a short delay
    setTimeout(function(){
      i.classList.add("animate");
    }, 0);
  });
});

// Ignore this code. It's only here to force the images to download
// on every test run. This code is NOT part of the answer.
document.querySelectorAll("img").forEach(function(i){
  i.src += "?time=" + new Date().toLocaleTimeString();
});

/* Style the preloader div to be in the center of the page */
.preloader {
  width:75%;
  height:75%;
  position:fixed;
  top:12.5%;
  left:12.5%;
  background-color:red;
}

img { width:200px; display:block; opacity:0;margin:5px;}


/* This CSS class will be applied to the preloader after the images have loaded*/
.hidden, img.hidden { opacity:0; transition:all 5s; }

/* Sample CSS animation effects to be applied once images are visible */
.animate { 
  opacity:1;
  margin-left:25%;
  transition:all 1s;
}

<div class="preloader"></div>

<!-- It's a good idea to set the images to not display initially (this is done with the
     class="hidden" below and the .hidden CSS class. This way you won't see the images at
     all until they are all loaded (i.e. you won't see partially loading images or some, but
     not all images. -->
<img class="hidden" src="https://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg">
<img  class="hidden" src="https://www.cfa.harvard.edu/sites/www.cfa.harvard.edu/files/images/pr/2006-03/1/hires.jpg">

Answer 2

You don't need to do anything to show your div, you just need to hide it once the images have loaded.

In the life-cycle of a page, the load event is triggered once all the external resources used on the page (images, style sheets, .js files, etc.) have completed downloading. This is a good place to do work that should wait until all images have loaded.

// The "load" event only triggers after all resources have finished downloading
window.addEventListener("load", function(){

  // Hide the preloader
  document.querySelector(".preloader").classList.add("hidden");

  // Put the images collection into a proper Array
  var imgArry = Array.prototype.slice.call(document.querySelectorAll("img"));
  
  // Loop through images array
  imgArry.forEach(function(i){
    // Unhide image
    i.classList.remove("hidden");
     
    // Animate image after a short delay
    setTimeout(function(){
      i.classList.add("animate");
    }, 0);
  });
});

// Ignore this code. It's only here to force the images to download
// on every test run. This code is NOT part of the answer.
document.querySelectorAll("img").forEach(function(i){
  i.src += "?time=" + new Date().toLocaleTimeString();
});

/* Style the preloader div to be in the center of the page */
.preloader {
  width:75%;
  height:75%;
  position:fixed;
  top:12.5%;
  left:12.5%;
  background-color:red;
}

img { width:200px; display:block; opacity:0;margin:5px;}


/* This CSS class will be applied to the preloader after the images have loaded*/
.hidden, img.hidden { opacity:0; transition:all 5s; }

/* Sample CSS animation effects to be applied once images are visible */
.animate { 
  opacity:1;
  margin-left:25%;
  transition:all 1s;
}

<div class="preloader"></div>

<!-- It's a good idea to set the images to not display initially (this is done with the
     class="hidden" below and the .hidden CSS class. This way you won't see the images at
     all until they are all loaded (i.e. you won't see partially loading images or some, but
     not all images. -->
<img class="hidden" src="https://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg">
<img  class="hidden" src="https://www.cfa.harvard.edu/sites/www.cfa.harvard.edu/files/images/pr/2006-03/1/hires.jpg">

The load event is triggered by any resource, so that means you can wait for all the resources on the entire page to be finished loading with window.addEventListener("load", ...) or you can do something when one particular resource is done loading, by referencing that specific resource:

var img = document.querySelector("#mySpecialImage");
img.addEventListener("load", function(){
   // This will be executed when the image with an id of "mySpecialImage" has loaded
});

Answer 3

There are many ways to achieve the following you either work with my first suggestion or the second.

First: You wait for the whole page to load including the specific image and then do something

window.onload = function() 
   var yourdiv = document.getElementById('YourDIV');
   yourdiv.style.display='none'
};

Second: You wait for that specific image to load then do something

var img = document.getElementById('YourImage');
img.onload = function () {
   var yourdiv = document.getElementById('YourDIV');
   yourdiv.style.display='none'
}

Both work, choice is yours.