在网页上加载图像之前如何显示加载器覆盖？

Question

我想制作加载叠加层，但我想使用 setTimeout 来显示 "loader"，直到第一张图片完全加载到网页上。（之后，我想使用延迟图像加载）

到目前为止，我一直在使用 setTimeout，但效果不是很好。我可以设置更长的时间，但现在在加载器和图像出现之间有一个 "gap"。

图片网址是从 wordpress API 中获取的，我正在使用模板。我想要的是在第一个图像完全加载之前显示 "loading" 叠加层，这样用户就不会看到空白状态。

var img = document.querySelector("#img");

img.onload = function(){ 
  document.getElementById("loading").style.display = "none" 
}

我不能使用 jQuery，因为它用于学校项目。我通过在加载时添加 console.log("loaded") 来尝试我在此处找到的所有替代方法，但似乎没有任何效果。

Answer 1

也许在定义 onload

之后设置 img.src

let img = document.createElement('img');
img.onload = function(){}
img.src = "url"

How to show loader overlay until image is loaded on webpage?