Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Показать картинку только после загрузки в браузер (https://javascript.ru/forum/misc/80935-pokazat-kartinku-tolko-posle-zagruzki-v-brauzer.html)

Ops 29.08.2020 17:01
Показать картинку только после загрузки в браузер
 
Есть фоновый <div class="b"> с классом .b у него пседоклассом ::before
Код:
.b::before {
    ...
    content: "";
    background-image: url("b.jpg");
    ...
}
прицеплена фоновая картинка, как мне так сделать на чистом JS чтобы она начинала показываться и к ней применялись анимированные стили (плавное появление, не стал приводить чтобы сократить пост), только после её полной загрузки в браузер, onload-ом не получается отловить. Спасибо.

рони 29.08.2020 18:23
Ops,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
body, html{

  height: 100%;
}

div.a {
   opacity: 0;
}

div.a.b{
    opacity: 1;
    transition: 3s;
}
div.b::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: "";
    background-image: var(--img, none);
    background-repeat:  no-repeat;
    background-size:  cover;
    background-position: center;
}

</style>

</head>

<body>
<div class="a"></div>
<script>
const img = new Image();
img.src = 'https://wallpaperscave.ru/images/original/18/06-22/earth-field-60178.jpg';
img.decode()
.then(() => {
  document.querySelector('.a').style.setProperty('--img', `url(${img.src})`);
  document.querySelector('.a').classList.add('b')
})

  </script>
</body>
</html>

Ops 30.08.2020 01:12
Спасибо! То что надо. Ещё немного переделаю под себя. :dance:

Ops 10.09.2020 22:49
А как сделать что бы одна картинка, не грузилась в браузер несколько раз?

Vlasenko Fedor 10.09.2020 23:50
картинка загружается единожды (если адрес не меняется динамически)
далее картика берется из кеша браузера
у вас стоит Disable cache галочка
уберите, и увидите, что берется из кеша, не дергая сервер

Ops 10.09.2020 23:57
Ох пардон, мне что то самому голову заморочили. Премного благодарен.


Часовой пояс GMT +3, время: 01:14.