Question

我正在尝试学习JavaScript。

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

我想首先加载我的图像，然后隐藏div。我对JavaScript并不是很清楚：

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

我不确定加载所有图像是否应该如下：

document.querySelectorAll('img');

我知道有一个if语句

如果加载了图片，请隐藏div。

或带有onload的addEventListener。

我想尽可能具体。我不确定如何写它。

提前致谢，

Answer 1

有很多方法可以实现以下功能，您可以使用我的第一个建议，也可以使用第二个建议。

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

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 2

您无需做任何事情来展示您的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
});

Javascript - 在图片加载时显示div

2 个答案: