如何在图像完全加载后隐藏div？

Question

我一直在为页面上的图片添加一个加载微调器。要做到这一点，我已经设置了一个加载微调器作为一个div的背景，围绕着图像，一旦图像加载完毕，背景微调器就会被图像覆盖。

问题是，我的一些图片有透明的中心，因此部分微调器会穿过图片。

有什么方法可以在图片加载完毕后，将div的背景设置为透明（或者其他可以隐藏spinner的方法）？

如果有一种方法可以在图片完全加载后触发javascript，那么可以通过设置javascript来实现，比如说 document.getElementById('loading').style.background = "transparent"; 我只是不知道这是否可能，因为我的javascript知识非常少。

谅谅

Answer 1

你可以监听窗口的DOMContentLoaded事件。一旦DOM的文本可用，但在其他外部资源如脚本、图像和样式表加载之前，这个事件就会触发。注意：我选择不使用更常见的窗口的 "加载 "事件，因为在图像加载（或失败）之前不会触发，这可能太晚了。这段代码可以让你知道图片是加载还是失败。恰好. 也许你想从DOM中删除破损的图片。你可能更喜欢 "加载 "事件，因为你知道浏览器已经尽力了，你要么得到了图片，要么得到了一个破损图片的缩略图。

通过这样做，我们可以检查DOM，计算图片的数量，为每个图片附加一个处理程序，当它们加载或失败时就会被调用。我们可以在这个处理程序中递减一个计数器，一旦计数器达到零，就会采取一些预先确定的行动。

借鉴之前对另一个问题的回答（制作一个3D图片框），你可以看到下面的效果。

"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>L O A D I N G</h1>
	<img src="https://picsum.photos/id/1015/728/600"  class="box">

Answer 2

你试图模拟一种 "懒惰加载"，但在JS中并没有一个事件可以监听。

对于这些类型的事件，你需要在JS代码中 "传递 "图像。例如，。

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

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

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

或者使用一个可以帮你实现这个功能的库，比如：https:/github.comverlokvanilla-lazyload。