如何在 javascript 中更改圖像 src 時使循環更快？

Question

實際上，我正在使用 PHP、Axios 從我的 MySQL 中檢索一些大數據，並且我使用了絕對沒問題的 get 方法......數據是一些 img 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);
        })
}

如果您想在此處查看演示 go https://ligalavanda.com/registration.php

Answer 1

您遇到了性能問題，因為您嘗試一次加載太多圖像。 837 確實是一個很大的數字 - 它生成 837 個單獨的 HTTP 請求，一方面。 這更加瘋狂，因為用戶在首次加載時甚至無法看到它們中的大部分（它們隱藏在單獨的選項卡中）。

我的建議是：只需加載開始時實際可見的那些。 如果用戶更改為查看另一個選項卡，則在那時加載該選項卡的圖像。 這將使初始加載更快，並且不會浪費時間和資源加載可能永遠不會查看的內容。

（通過使用緩存和/或 CDN，您還可以通過其他方式進一步優化，您可以單獨研究）。