Question

如何在React中创建加载图片的队列？事实上，对于React VR，但在大多数情况下，我认为它应该是相同的 - 一个更大的区别可能是我不能使用Webpack。对我来说重要的是我希望能够在加载过程中更改它。例如，我有5个非常大的图片，我们已经先加载了第二个，但是用户点击了图片编号4，所以应该开始加载这个图片而不是3个。

Answer 1

处理这种异步过程的一种方法是使用promises。

也许您有一系列链接可以从中加载图像

const imagesURLs = [ /* a list of URLs */ ]

然后，您可以执行异步切换图像的功能

function loadAllImagesStartingFrom(index, imagesURLS) {
     if (index >= imagesURLS.length) return;
     someImageRetrivingPromise(imagesURLS[index])
         .then(res => {
            /* do something with the image */
            loadAllImagesStartingFrom(index + 1, imagesURLS);
         });
}

因此，如果要加载所有图像，可以调用

loadAllImagesStartingFrom(0, imagesURLs);

并且如果还没有加载图像则必须重新调用图像时才会独立调用someImageRetrivingPromise（您应该先进行检查）。

这种方法的唯一问题是，如果一个图像没有被加载并且你单独加载它然后它被加载到＆＃34;队列＆＃34;也是，所以会有一个双重调用，但你可以在loadAllImagesStartingFrom之前检查someImageRetrivingPromise如果图像已经加载alredy然后调用loadAllImages(index + 1, imagesURLS);而不是承诺。

React - 加载图片的队列，可以更改它

1 个答案: