移动浏览器内存管理——加载和卸载大量图像

如何解决移动浏览器内存管理——加载和卸载大量图像

我正在对可能超出浏览器处理能力极限的网络演示进行故障排除，尤其是在移动设备上。

演示文稿加载了大约 1500 张图像，每张大约 185k - 总共约 275mb - 显示在大约 115 行，每行大约 13 张图像中。

每行跨越整个屏幕宽度，115 行超出屏幕高度，需要滚动查看。

此站点的第一次加载在所有设备上都正常工作：所有图像都加载到所有行中。

随着用户上下滚动、放大和缩小，挑战随之而来。

据我所知，浏览器卸载了超出视口的图像，因此当它们滚动或放大回视口时，它们会丢失。有时它们会自动重新加载，但用户滚动和缩放的时间越长，卸载的图像就越有可能被遗忘，直到随着时间的推移，图像完全丢失，必须刷新页面。

这种类型的加载和卸载与基于标签的实际加载和卸载无关。这与浏览器内存管理有关。

我一直在测试许多功能，但没有成功

• 使用 JS 检测视口中的图像，在图像滚动进出视口时加载和卸载图像。
• 延迟加载

问题在 iOS 浏览器中持续存在：Safari 和 Chrome。在大屏幕/大容量设备上问题较少。

感谢您的见解。