Форум

Ops · #1 (**permalink**) 29.08.2020, 17:01

Есть фоновый <div class="b"> с классом .b у него пседоклассом ::before

Код:

.b::before {
    ...
    content: "";
    background-image: url("b.jpg");
    ...
}

прицеплена фоновая картинка, как мне так сделать на чистом JS чтобы она начинала показываться и к ней применялись анимированные стили (плавное появление, не стал приводить чтобы сократить пост), только после её полной загрузки в браузер, onload-ом не получается отловить. Спасибо.

рони · #2 (**permalink**) 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 · #3 (**permalink**) 30.08.2020, 01:12

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

Ops · #4 (**permalink**) 10.09.2020, 22:49

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

Vlasenko Fedor · #5 (**permalink**) 10.09.2020, 23:50

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

Ops · #6 (**permalink**) 10.09.2020, 23:57

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

Форум

Справочник

Discord чат

Курсы javascript