如何在网页上加载图片之前显示加载程序叠加图？

Question

我想制作一个加载叠加层，但是我想使用setTimeout显示“加载器”，直到第一个图像完全加载到网页上。 （之后，我想使用惰性图像加载）

直到现在我都使用了setTimeout，但是效果不是很好。我可以设置更长的时间，但是现在加载器和图像出现之间存在一个“间隙”。

图片网址是从wordpress API获取的，我正在使用模板。 我要显示的是“正在加载”叠加层，直到第一张图片完全加载完毕，这样用户才能看不到空白状态。

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"