离子：快速加载图像

Question

我正在构建一个带有Ionic 3和angular 2/4

的小应用程序

我在从网址加载图片列表时遇到问题（每张图片5MB）

显示图像需要花费大量时间。

如何更快地加载图片？

有没有办法首先以低质量显示图像？ （如Facebook和Whatsapp）

任何链接，任何教程，任何博客......

//js
private photo = "http://my-url.com";
private photo2 = "http://my-url-2.com";

//html
<div> <img [src]="photo"> </div>
<div> <img [src]="photo2"> </div>

谢谢！

Answer 1

imho最方便的方式是：

1. 压缩 - 你首先需要问自己：我真的需要一个5mb的图像吗？太大了吗？可以压缩（例如jpeg / png）吗？

2. 缩略图 - 原始图像的1个（或更多）版本，它们要小得多，因此加载速度要快得多。在许多情况下（例如列表，概述），您甚至不需要原始图像，因为img容器的大小更小。因此，一种方法是仅加载+显示特定用例所需的大小。当你真正需要5mb版本时，你可以从缩略图开始，并在完整大小加载完成后替换它。这不会减少加载时间，但感觉更顺畅。

3. 预加载 - 您可以预先加载图像（例如，当您知道它们将很快显示时），以便在实际显示图像时移除慢速加载部分。

4. 缓存 - 当您的图片变化不大时，您可以考虑在设备上缓存图像。这样，无论何时您需要第二次加载5mb图像（即使在重新启动应用程序之后），它都会使用本地副本而不是远程副本，并且几乎可以立即显示。

理想情况下（根据您的用例），您可以将所有四种内容组合在一起：压缩图像，不同大小的图像版本，必要时预加载以及缓存以确保图像仅加载一次。

在我的应用中，我使用的是简单但很棒的插件ionic-image-loader，我强烈推荐。它很容易实现，并且几乎不费力地覆盖3.和4.

我希望我能帮忙！