Javascript - 在图像加载时显示 div

Question

我正在尝试学习 JavaScript。

我有一个名为预加载器的 div 类，它覆盖屏幕的 z 索引高于图像。

我希望先加载图像，然后隐藏 div。我对 JavaScript 不太清楚：

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

我不确定是否应该按以下方式加载所有图像：

document.querySelectorAll('img');

我知道有一个 if 语句

如果加载图像则隐藏 div。

或带有 onload 的 addEventListener 。

我试图尽可能具体。我不知道怎么写。

提前致谢，

Answer 1

您无需执行任何操作即可显示您的

div

，只需在图像加载后将其隐藏即可。

在页面的生命周期中，一旦页面上使用的所有外部资源（图像、样式表、.js 文件等）完成下载，就会触发

load

事件。这是一个进行工作的好地方，应该等待所有图像加载完毕。

// 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">

load 事件由任何资源触发，因此这意味着您可以使用

window.addEventListener("load", ...)

等待整个页面上的所有资源完成加载，或者您可以在某个特定资源加载完成时通过引用该特定资源来执行某些操作:

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

Answer 2

有很多方法可以实现以下目标，您可以使用我的第一个建议或第二个建议。

首先：等待整个页面加载，包括特定图像，然后执行某些操作

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

第二：等待特定图像加载然后执行某些操作

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

两者都可以，选择权在你。

Answer 3

// 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">