javascript - 如何在我的 React 组件的映射对象中预加载我的图像？

Question

我有一个从对象映射并列在网格中的产品列表，显示图像和标题。目前，当用户到达产品视图时，产品图像似乎需要一些时间才能加载，而不是立即可见。

我知道有一种方法可以预加载它们，但是我不确定在这种情况下如何做到这一点。我该怎么办？

//ProductData.js

const ProductData = [
  {
    id: 1,
    name: 'Product 1',
    slug: 'product-1',
    static_img: 'product_1_static.jpg',
  },
  {
    id: 2,
    name: 'Product 2',
    slug: 'product-2',
    static_img: 'product_2_static.jpg',
  },
  {
    id: 3,
    name: 'Product 3',
    slug: 'product-3',
    static_img: 'product_3_static.jpg',
  },
];

export default ProductData

// ProductResults.js

function ResultsList() {
      const { choices, setChoices } = useContext(ChoicesContext);
      const ProductsResult = ProductData.filter(x => x.categories.includes(choices.category) && x.waterTypes.includes(choices.waterType) && x.feedTypes.includes(choices.feedType));

      return (
        <div id="productResults">
          {ProductsResult.map((item, i) => (
            <div key={i} className="product">
              <Link
                onClick={() => setChoices({ ...choices, productSelected: item.name })}
                to={{
                  pathname: '/products/' + item.slug,
                  name: item.name,
                }}
              >
                <img src={require(`../images/sequences/${item.static_img}`)} alt="" />
                <h4>{item.name}</h4>
              </Link>
            </div>
          ))}
        </div>
      )
    } 

标签： javascriptreactjs