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

Question

我一直在为页面上的图像添加加载微调器。 为此，我将加载微调器设置为围绕图像的 div 的背景，一旦加载图像，背景微调器就会被图像覆盖。

问题是我的一些图像具有透明的中心，因此微调器的一部分通过图像。

一旦图像完全加载，有没有办法将 div 背景设置为透明（或其他可以删除/隐藏微调器的东西）？

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

谢谢

Answer 1

您正在尝试模拟一种“延迟加载”，但 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.com/verlok/vanilla-lazyload

Answer 2

您可以监听 window 的 DOMContentLoaded 事件。 这将在 DOM 的文本可用时触发，但在其他外部资源（如脚本、图像和样式表）加载之前。 注意：我选择不使用 window 更常见的“加载”事件，因为在图像加载（或失败）之前不会触发，这可能为时已晚。 此代码允许您在发生时判断图像是否已加载或失败。 也许您想从 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>LOADIN G</h1> <img src="https://picsum.photos/id/1015/728/600" class="box">