使用交叉点观察者设置背景图像 src 时，Safari 上的白色闪烁/闪烁？答案

【问题标题】：White flash/flicker on Safari when setting background-image src with intersection observer?使用交叉点观察者设置背景图像 src 时，Safari 上的白色闪烁/闪烁？
【发布时间】：2019-05-26 11:32:53
【问题描述】：

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

更新：在 FireFox 中也会出现闪烁...

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

当设置了模糊的初始图像时，行为正在“工作”，然后被高质量的图像替换，但中间发生了白色闪烁或闪光......（页面的背景是白色的，所以也许这就是显示出来？）

经过一番阅读：(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，但没有运气。我没有制作任何动画，只是将div 上的src 替换为预加载的全尺寸图像。

【问题讨论】：

标签： javascript css intersection-observer

【解决方案1】：

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

【讨论】：