时间戳

首页 > 解决方案 > 如何在执行函数之前加载一些图像

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

问题描述

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

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

图像具有这种结构：

<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 之外的大多数浏览器上，并且在第一次访问时浏览器未缓存照片。

标签： javascriptimagepromisesrcset

解决方案

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

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

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

推荐阅读