滚动时图像闪烁？ （不使用延迟加载）

Question

在我的角度应用程序中，我有一个包含25 carousels和~600张图像的页面。

每个图像尺寸接近40-50kb，在滚动图像上，仅在铬合金中开始闪烁（参见下图）。 我没有为图像使用任何lazyload库。

是什么原因以及如何解决这个问题？

提前致谢。

Answer 1

我认为以最简单的方式预加载图片并不是一个坏主意

const preloadImages = (urls) =>
  Promise.all(urls.map(url =>
    new Promise(resolve => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = () => resolve(img);
      img.src = url;
    })
  ));