Как отобразить изображение в полном объеме?

Question

У меня есть веб-сайт, и с момента загрузки страницы требуется время, поэтому мне нужно отображать изображение до тех пор, пока страница не загрузится.

Как я могу это сделать? Я нахожу это решение и это , но сейчас я в замешательстве. мой пи c равен

Answer 1

Изображение удаляется при загрузке страницы.

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#loading-img").remove();
})

#loading-img {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 999999;
  object-fit: cover;
}

<img id="loading-img" src="https://i.stack.imgur.com/y6RWO.gif" />

Или вы можете установить любое конкретное c время для удаления изображения.

setTimeout(() => {
  document.querySelector("#loading-img").remove();
}, 2000); // remove img after 2 seconds

#loading-img {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 999999;
  object-fit: cover;
}

<img id="loading-img" src="https://i.stack.imgur.com/y6RWO.gif" />