javascript - 如何在执行函数之前加载一些图像

Question

我有一个图像 slider 最初位于视口(viewport)之外，然后滑入。我希望在加载前三个图像时发生这种情况，否则用户会在 slider 移入视口(viewport)时看到图像下载。

我尝试使用 Promise 预加载图像，但图像未预加载，并且 slider 初始化函数与图像下载并行运行。

图像具有这种结构:

<img srcset="
  https://www.datocms-assets.com/portrait.jpg?w=600&amp;auto=format 600w,
  https://www.datocms-assets.com/portrait.jpg?w=900&amp;auto=format 900w,
  https://www.datocms-assets.com/portrait.jpg?w=1200&amp;auto=format 1200w" 
  sizes="(min-width: 400px) 80vw, (min-width: 700px) 75vmin, 100vw" 
  src="https://www.datocms-assets.com/portrait.jpg?w=900&amp;auto=format"
/>

脚本:

const loadImage = path => {
  return new Promise(resolve => {
    const img = new Image();
    img.srcset = path;
    img.onload = () => resolve();
  });
};

const sliderEl = document.querySelector('.slider');

const firstImages = Array.from(sliderEl.querySelectorAll('img'))
  .filter((item, i) => i < 3)
  .map(image => image.src);

const loadImg = (...paths) => Promise.all(paths.map(loadImage));
loadImg(...firstImages).then(initSlider(sliderEl));

编辑:您可以在此处查看该网站 https://photography-blog.netlify.com/ 。该问题似乎出现在除 Chrome 之外的大多数浏览器上，并且在第一次访问期间浏览器未缓存照片时。

Answer 1

我认为您的问题可能与 URI https://www.datocms-assets.com/portrait.jpg 有关。返回 404。

如果确实如此，您还应该考虑 loadImage 方法中的 onerror 回调:

const loadImage = path => {
  return new Promise(resolve => {
    const img = new Image();
    img.srcset = path;
    img.onload = () => resolve();
    img.onerror = () => resolve();
  });
};