圖像完全加載后如何隱藏 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">