管理離屏圖像的內存

Question

我有一個網頁，我想要使用html和javascript顯示數以萬計的圖像。每張表格（每行6個）每次只能顯示大約24-30張圖像，所以我認爲我很聰明地編寫自己的javascript滾動，例如，當滾動下來時，從第2-3行屏幕的底部被構建，並且動態加載圖像，因爲它們靠近可視區域頂部的2-3行，並且被刪除（使用javascript在整個表格行中刪除子節點）。但是，這並沒有對我所希望的RAM的保存產生影響，並且在看到幾百行之後，由於內存不足，瀏覽器經常崩潰。

我已經搜索了一些方法來告訴瀏覽器它可以釋放這些對象，但沒有成功。我明白，在一些現代化的實現中，你可以讓瀏覽器運行垃圾收集，但這不適用於所有瀏覽器或完全支持。我可以想象的一件事是，在數十行之後，通過編程方式重新加載頁面，同時以某種方式保存狀態（cookie，本地存儲或url），但我更願意將它作爲一個連續頁面，並簡單釋放由不再使用的圖像。什麼是正確的方法來做到這一點？

Answer 1

hackartist，

你是絕對正確的，具有基於您的滾動圖片的動態加載將是對這一問題的最佳解決方案。但是，爲什麼重新發明輪子？你所指的是lazy loading。對於這個問題，jQuery和Echo.js庫都有流行的解決方案。

由於上述兩者都是開源的：您可以參考自己的實現，貢獻自己的更好，或者只是使用他們原有的工具！

另外，僅供大家參考，這裏有一篇關於Stack Overflow的標題爲「What is JavaScript garbage collection?」的好帖子，它可以解釋如何爲JS實現垃圾收集。這也是Mozilla開發人員網絡上的一篇參考文獻，標題爲「Memory Management」，它解釋瞭如何在不再需要時釋放分配的內存。

如果您有任何問題，請讓我知道！