Reactjs React-用于加载图片的队列，并可能对其进行更改

我如何排队在React中加载图片？事实上，对于React VR，但在大多数情况下，我认为两者应该是一样的——一个更大的区别可能是我不能使用Webpack。对我来说重要的是，我希望能够在加载期间更改它。例如，我有5张非常大的图片，我们已经加载了第一张和第二张，但是用户单击图片编号4，所以应该开始加载这张图片，而不是3。

处理这种异步过程的一种方法是使用承诺

也许你有一个链接数组，可以从中加载图像

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);
         });
} 

然后可以执行异步检索图像的函数

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);

当您必须检索尚未加载的图像时，可以独立调用

someImageRetrievingPromise

（您应该先进行检查）

---

这种方法的唯一问题是，如果一个图像没有被加载，而您单独加载它，那么它也会被加载到“队列”中，因此会有一个双重调用，但是您可以在

SomeImageRetrievingPromise

之前签入

loadAllImagesStartingFrom

，如果图像已经加载，则调用

loadAllImages（索引+1，imagesURLS）而不是承诺。
谢谢。我将很快尝试此功能，并将连接结果；）也许对你有帮助。我写它是因为我有类似的问题。