3

我在我的网站上使用fotorama.io，并且我在滑块 (60-80) 中有一个大型图像库，所以我按照手册中的建议使用延迟加载来不一次加载我的所有图像。

但是当我浏览图像并且已经达到 40 多张图像时，我的浏览器内存已超载，浏览器开始响应缓慢，我有 Firefox 的 Memory Restart 插件，这表明我的内存非常高。

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

4

3 回答 3

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>

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

于 2015-01-28T16:42:26.443 回答
1

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

于 2013-07-15T20:37:13.733 回答
1

如果想延迟加载 img 标签，只需输入宽度和高度。

例子 ：

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

和它的工作！

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

于 2017-11-08T08:09:02.747 回答