Добавить класс изображению после его загрузки

Question

Добавить класс изображению после его загрузки

Рейтинг: 0Ответов: 1Опубликовано: 09.06.2023

Имеется такая конструкция:

<p>Очень много контента, на 20 экранов</p> <img loading="lazy" src="load.jpg" alt="Памагити плз :)">

Как можно с помощью js добавить класс изображению, когда оно полностью прогрузится, т.е. мы доскроллили до изображения, оно загрузилось (loading="lazy"), и ему присвоился класс, например, "loaded".

Я нашел статью под это дело, но у меня почему-то не работает..

Тут все работает, а у меня на локальном сервере в vscode не работает (

const blurredImageDiv = document.querySelector(".blurred-img")
const img = blurredImageDiv.querySelector("img")
function loaded() {
  blurredImageDiv.classList.add("loaded")
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener("load", loaded)
}

.blurred-img {
  background-repeat: no-repeat;
  background-size: cover;
}

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: var(--text-color);
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

.blurred-img.loaded::before {
  animation: none;
  content: none;
}

.blurred-img img {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.blurred-img.loaded img {
  opacity: 1;
}

<div class="blurred-img">
  <img src="https://images.unsplash.com/photo-1686216941182-0f5699f4584d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=725&q=80" loading="lazy" />
</div>

javascript lazyloading

Источник: Stack Overflow на русском

Answer 1

▲ 0

Пример варианта решения задачи.

Находим все дивы с классом
Находим внутри них картинки
Вешаем обработчик
В обработчите обращаемся к родителю картинки и добаляем ему класс

const imagesBlocks = document.querySelectorAll(".blurred-img");

const handlerLoadedImage = (e) => {
  e.target.parentElement.classList.add('loaded');
};

imagesBlocks.forEach((blurredImageDiv) => {
  const img = blurredImageDiv.querySelector("img")
  img.addEventListener("load", handlerLoadedImage);
})

.blurred-img {
  background-repeat: no-repeat;
  background-size: cover;
}

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: var(--text-color);
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

.blurred-img.loaded::before {
  animation: none;
  content: none;
}

.blurred-img img {
  filter: blur(8px);
  transition: filter 250ms .2s ease-in-out;
}

.blurred-img.loaded img {
  filter: blur(0);
}

<div class="blurred-img">
  <img src="https://images.unsplash.com/photo-1686216941182-0f5699f4584d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=725&q=80" loading="lazy" />
</div>

<div class="blurred-img">
  <img src="https://images.unsplash.com/photo-1686216941182-0f5699f4584d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=725&q=80" loading="lazy" />
</div>

<div class="blurred-img">
  <img src="https://images.unsplash.com/photo-1686216941182-0f5699f4584d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=725&q=80" loading="lazy" />
</div>

Добавить класс изображению после его загрузки

Ответы