Fotorama滑块 - 如何懒惰加载图像，然后在不可见时卸载它们？

Question

所以我在我的网站上使用了fotorama.io，我在滑块（60-80）中有一个大型图像库，所以我按照手册中的建议使用Lazy Load来不立即加载我的所有图像。

但是当我浏览图像并且已经达到40多张图像时，我的浏览器内存超载并且浏览器开始缓慢响应，我有Firefox的内存重启插件，它显示我的内存非常高。

有没有办法使用延迟加载并保留例如10个图像，并卸载所有不可见的图像或最远10+的图像以便卸载以便清除内存？

Answer 1

这是一个有趣的问题！我现在不能从内存中卸载图像，我认为浏览器必须自动管理它。顺便说一句，Fotorama分离隐形图像。 Аs我知道这是大型画廊的最佳实践。

Answer 2

即使使用JavaScript删除图片，浏览器也会加载图片。以下示例中的所有图像都将立即下载：

<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

如果您不担心没有JavaScript的浏览器，请通过更改HTML来启用延迟加载：

<div class="fotorama">
  <a href="1.jpg"></a>
  <a href="2.jpg"></a>
</div>

添加缩略图：

<div class="fotorama">
  <a href="1.jpg" data-thumb="1_thumb.jpg"></a>
  <a href="2.jpg" data-thumb="2_thumb.jpg"></a>
</div>

这里的所有照片都使用这种图像嵌入方法。

Answer 3

如果想在img标签上加载延迟，只需放宽度和高度。

示例：

<div class="fotorama" width="360" and height="360">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

它的工作！

PS：经过测试的响应式网站和所有浏览器。