CSS/JS 延迟加载背景图片（白色闪烁）

Question

So I've been trying to lazy load background images, by initially having a low res image which then gets swapped out to a high res one. I've tried a few different lazy loaders, but they all seem to have the same issue - when the image swaps there is a flicker. I've used Yall Lazy Image Loader, and added some modifications so that the image is actually loaded before, being applied to the background image - however there is still a brief white flicker of the image changing. It's more noticeable in Firefox, and happens when the image isn't cached.

Any ideas? Here's a codepen:

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

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

Thanks in Advance.

Answer 1

Rendering both elements to the DOM first and later changing the opacity values should be the most performant because the browser will not paint or composite the layers again. You can leverage the new "loading=lazy" attribute and the browser will do that work for you. The code below can be tweaked to use background images instead of inline images. Consider the will-change attribute on .wrapper if you still seeing flickering.

<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;
}