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

Question

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

Answer 1

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

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

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（您应先进行检查）。

这个方法的唯一问题是，如果一个图像还没有被加载，而你单独加载它，那么它也会被加载到 "queue" 中，所以会有一个双重调用，但你可以在 someImageRetrivingPromise 之前检查 loadAllImagesStartingFrom 如果图像已经加载，则调用 loadAllImages(index + 1, imagesURLS); 而不是承诺。

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

React - queue for loading pictures with possibility to change it

queue

loading

reactjs