在Safari上使用十字路口观察者设置背景图像src时出现白色闪光/闪烁

Question

我研究了很多，但无法解决这个问题。仅在Safari(Mac和iOS)上显示。适用于Chrome、FF、Edge等

更新：FireFox也会出现闪烁

我正在使用IntersectionObserver API以及所需的polyfil来延迟加载图像。当它们进入视野时，交叉点观测者替换设置为background-image的低分辨率图像，并将其替换为存储在div上的数据属性中的高分辨率图像

当模糊的初始图像被设置，然后被高质量的图像取代时，这种行为正在"工作"，但其间会出现白色闪烁或闪光。。。(页面的背景是白色的，所以这可能就是通过显示的内容？)

经过一些阅读：(如何防止背景图像在更改时闪烁)我确实通过使用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，但运气不好。我没有制作任何动画，只是用预加载的全尺寸图像替换div上的src。

Answer 1

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