Question

我已经研究了很多，无法解决此问题。仅出现在Safari（Mac和iOS）上。适用于Chrome，FF，Edge等。

更新：闪烁也发生在FireFox中...

我正在使用IntersectionObserver API以及所需的polyfil来延迟加载图像。当它们出现时，相交观察器将替换为background-image的低分辨率图像，并将其替换为存储在div的data属性中的高分辨率图像。

在设置了模糊的初始图像后，该行为是“正常的”，然后被高质量的图像替代，但是在中间出现白色闪烁或闪烁...（页面背景为白色，所以也许就是这样显示出来吗？）

经过一番阅读：（How to prevent a background image flickering on change）我确实通过使用new Image()构造器预加载了图像来解决了跳转问题。

const setBackgroundImage = (e) => { 
  let image = new Image();
  image.onload = () => e.style.backgroundImage = `url(${e.dataset.bgImage})`;
  image.src = e.dataset.bgImage;
};

示例HTML元素（PHP）：

<div class="my-div" 
     style="background-image: url('<?= $imagePreload ?? $image; ?>');" 
     data-bg-image="<?= $image; ?>"
</div>

我尝试过玩backface-visibility: hidden，但是那里没有运气。我没有设置任何动画效果，只是将src上的div替换为预先加载的全尺寸图片。

Answer 1

您可以通过在滚动到视图之前加载更高分辨率的图像来解决此问题。创建rootMargin时，请将200px选项设置为IntersectionObserver之类，以使浏览器在进入视口之前开始加载200px的图像。

使用相交观察器设置背景图像src时，Safari上出现白色闪光/闪烁？

1 个答案: