我正在使用 Ionic 3 和 angular 2/4 构建一个小应用程序
我无法从 URL 加载图片列表（每张图片 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>
谢谢！
【问题讨论】：
标签： angularjs ionic-framework ionic2
恕我直言，最方便的方法是：
压缩 - 您需要问自己的第一件事：我真的需要 5mb 的图像吗？是不是太大了？可以压缩吗（例如jpeg/png）？
缩略图 - 原始图像的 1 个（或更多）版本，它们要小得多，因此加载速度要快得多。在许多情况下（例如列表、概览），您甚至不需要原始图像，因为您的 img 容器的大小要小得多。因此，一种方法是仅加载+显示该特定用例所需的大小。当您真的需要 5mb 版本时，您可以从缩略图开始，并在全尺寸版本加载完成后替换它。这不会减少加载时间，但感觉更流畅。
预加载 - 您可以预加载图像（例如，当您知道它们将很快显示时）以在实际显示图像时消除加载缓慢的部分。
缓存 - 当您的图像变化不大时，您可能会考虑在设备上缓存图像。这样，每当您需要第二次加载 5mb 的图像时（即使在应用重新启动后），它都会使用本地副本而不是远程副本，并且几乎可以立即显示。
理想情况下（取决于您的用例）您可以结合所有四件事：压缩图像、不同大小的图像版本、必要时预加载和缓存以确保图像只加载一次。
在我的应用程序中，我使用的是简单但很棒的插件ionic-image-loader，我强烈推荐它。它很容易实施，几乎不费吹灰之力就涵盖了 3. 和 4.。
希望能帮到你！
【讨论】：