瀏覽器慢渲染5600點的div個網格內

的img比方說，我有一個JavaScript的是，一些計算後，寫這樣瀏覽器慢渲染5600點的div個網格內

str += '<div class="divClass"><img class="imgClass" src="all_images/'+ result_image +'.png" /></div>';

需要的字符串來填充圖像的「網格」的字符串，我需要每秒至少更新一次字符串15次。

問題是，你可能已經猜到，瀏覽器是做這個工作真的很慢...

對如何提高「渲染」時間的任何想法？

任何輸入讚賞。

2016-04-12 Lucio

你爲什麼使用5600的div？你的基本html是什麼？ –

這段代碼片段是否會循環運行5600次，並且會導致包含div的圖像出現大量字符串？ – Vedanshu

你想達到什麼目的？ – jeff

這是載入5600個人照片？如果是這樣，如果圖像非常小，您可以嘗試將它們組合成sprite，然後調用單個圖像，並指定背景位置以在給定位置顯示單個圖像。減少5000多個圖像通話將有很大幫助。

2016-04-12 16:17:55

這很聰明，謝謝。我會明天嘗試你的解決方案..無論如何，一切都必須在本地工作，所以我想知道5600圖像調用真的是「耗時」？我的意思是，瀏覽器助手只需要從一個文件夾中獲取圖像並將其放置在一個div中！ – Lucio

每次打電話找到圖片時，都必須解釋您要放送的路徑，然後查找圖片，驗證是否找到了圖片，將圖片帶回瀏覽器，然後渲染，然後緩存它。如果你有一張圖片，只需要做一次，那麼圖片基本上可以直接在瀏覽器中使用。 –

@Lucio部分延遲是瀏覽器需要用每個新創建的div重建DOM。嘗試在HTML中建立網格，然後你需要做的就是填寫圖像文件信息，即

imgs = document.querySelectorAll(".divClass img"); 
for(x=0; x<imgs.length; x++) { 
    imgs[x].src = "all_images/'+ result_image[x] +'.png"; 
}

2016-04-13 01:31:25 jeff

謝謝傑夫，我已經在考慮使用你的解決方案，因爲我的網格沒有任何響應，但實際上是一個100x56的網格。所以首先我將嘗試構建帶有56個固定寬度列的HTML網格， 1000固定高度的行..但也許我也會使用羅布的解決方案，並使用精靈放置div的背景圖像。謝謝你們，我會隨時向你通報結果 – Lucio

回答