Как показать наложение загрузчика, пока изображение не загружено на веб-страницу?

Question

Я хочу сделать загрузочный оверлей, но вместо этого используя setTimeout Я хотел бы показывать «загрузчик», пока первое изображение полностью не загрузится на веб-странице. (После этого я бы хотел использовать ленивую загрузку изображений)

До сих пор я использовал setTimeout, но он работает не очень хорошо. Я могу установить большее время, но теперь между загрузчиком и появлением изображения есть «пробел».

URL-адреса изображений получены из WordPress API, и я использую шаблон. Я хочу показывать оверлей «loading» до полной загрузки первого изображения, чтобы пользователи не видели пустое состояние.

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

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

Я не могу использовать jQuery, потому что это для школьного проекта. Я перепробовал все найденные здесь альтернативы, добавив console.log("loaded") при загрузке, но, похоже, ничего не работает.

Answer 1

Может быть, установите img.src после того, как вы определили нагрузку

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