使用交叉點觀察器設置背景圖像 src 時，Safari 上出現白色閃光/閃爍？

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。