如何在javascript中更改图像src时加快循环？

实际上，我正在使用PHP、Axios从MySQL中检索一些大数据，我使用的get方法非常好。。。数据是一些img src现在我使用循环来更改图像src，但是更改src花费了太多的时间，大约5到10秒

function show(){
        axios.get('php/retrieve_characters.php')
        .then(function(response){
             var data = response.data;
             if(data!='') {  
               for(var i=0;i<837;i++) {
                 document.getElementById(i).src=data[i].charac;  
               }
               console.log(data);
             }
        })
        .catch(function(error){
            alert(error);
        })
}

函数显示（）{
get（'php/retrieve_characters.php'））
.然后（功能（响应）{
var数据=响应数据；
如果（数据！=''）{
对于（var i=0；i您会遇到性能问题，因为您试图一次加载太多的图像。837确实是一个很大的数字——首先，它会生成837个单独的HTTP请求。更疯狂的是，用户甚至无法在第一次加载图像时看到大部分图像（它们隐藏在单独的选项卡中）

我的建议是：只需加载一开始实际可见的图像。如果用户更改为查看另一个选项卡，则在该时间加载该选项卡的图像。这将加快初始加载速度，并且不会浪费时间和资源加载可能永远看不到的内容

（您还可以通过使用缓存和/或CDN（您可以单独研究）来进一步优化此功能）.
你的循环非常紧凑，你需要给界面时间进行更新。我会说，一次加载837个图像是个问题，而不是代码。在live page上有多个选项卡，也许你应该只加载当前选项卡的图像？“如果你想看到演示转到这里”这样做，你的整个问题（包括任何必要的代码）必须在你的问题中，而不仅仅是链接。两个原因：人们不应该离开网站来帮助你；链接腐烂，使问题及其答案在未来对人们毫无用处。请在问题中添加一个，理想情况下。更多：我同意一次加载这么多图像并期望它很快是疯狂的。你正在生成一个巨大的数字HTTP请求的BER。只需加载你需要的。考虑改变UI，因此它显示一个较小的数字一次，并有一个“更多…”按钮类似或创建更多标签或一些东西。此外，考虑一下，如果你还没有，使用一些缓存，并不意味着你同时加载它们。也很难将数字编码到你的JavaScript中……如果你添加更多的字符会怎么样？你不想仅仅因为这个就发布你的前端的新版本。ode>数组的长度

属性，例如（var i=0；i