时间戳

首页 > 解决方案 > 使用交叉点观察者设置背景图像 src 时，Safari 上的白色闪烁/闪烁？

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

问题描述

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

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

我正在使用 IntersectionObserver API 以及所需的 polyfil 来延迟加载图像。当它们进入视野时，交叉点观察者将低分辨率图像集替换为 div，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但没有运气。我没有为任何东西制作动画，只是用预加载的全尺寸图像替换srcon 。div

标签： javascriptcssintersection-observer

解决方案

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

推荐阅读