CSS / JS Ленивая загрузка фоновых изображений (белый мерцание)

Question

Так что я пытался лениво загружать фоновые изображения, изначально имея изображение с низким разрешением, которое затем заменяется на изображение с высоким разрешением. Я пробовал несколько разных ленивых загрузчиков, но все они, похоже, имеют одну и ту же проблему - при смене изображения появляется мерцание. Я использовал Yall Lazy Image Loader и добавил несколько модификаций, чтобы изображение действительно загружалось до того, как оно было применено к фоновому изображению - однако при смене изображения все еще наблюдается небольшое белое мерцание. Это более заметно в Firefox и происходит, когда изображение не кэшируется.

Есть идеи? Вот кодовая ручка:

https://codepen.io/kehza/pen/PoPKZBa

newImg.onload = function () {
    this.backgroundTarget.classList.remove(lazyBackgroundClass);
    this.parentNode.removeChild(this);
};

Заранее спасибо.

Answer 1

Рендеринг обоих элементов в DOM сначала, а затем изменение значений непрозрачности должно быть наиболее эффективным, потому что браузер больше не будет рисовать или комбинировать слои. Вы можете использовать новый атрибут "loading=lazy", и браузер сделает это за вас. Код ниже можно настроить для использования фоновых изображений вместо встроенных изображений. Рассмотрите атрибут will-change на .wrapper, если вы все еще видите мерцание.

<div class="wrapper">
  <img class="lowres" src="https://cdn.shopify.com/s/files/1/0254/2426/5278/files/Suited-Racer_200x.jpg" />
  <img class="highres" loading="lazy" src="https://cdn.shopify.com/s/files/1/0254/2426/5278/files/Suited-Racer_1920x.jpg" />
</div>

js

document.querySelectorAll('img.highres').forEach(img => {
  img.addEventListener('load', e => {
    img.parentElement.classList.add('highres-loaded'))
  })
})

css

.wrapper {
  position: relative;
  line-height: 0;

  /* set fixed size for your page */
  width: 100%;
  height: 500px;
}
.wrapper img {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.highres {
  opacity: 0;
}
.highres-loaded .lowres {
  opacity: 0;
}
.highres-loaded .highres {
  opacity: 1;
}