Nativescript 加载图像

Question

这是我的场景：在我的主视图中，我正在加载一个项目列表。每个项目都有一个 imageURL 属性。我将 Image 组件绑定到 ImageURL 属性。一切正常，但图像需要额外一两秒来加载，在此期间图像组件被折叠。加载图像后，图像组件将正确显示。这会在呈现图像时在页面上产生不希望的偏移。

相同的图像将在其他 2 个视图上呈现。

处理这种情况的最佳做法是什么？我尝试加载 base 64 字符串而不是图像 url，这很有效，但它显着减慢了初始视图的加载速度。

如何在视图之间导航时预先获取图像并重复使用它们？我正在查看似乎正在解决确切情况的图像缓存模块，但文档非常模糊，我发现的唯一示例（https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js）并没有真正解决相同的情况。如果我正确理解了代码，这更多的是关于虚拟滚动。就我而言，我只有 2-3 个项目，所以滚动并不是一个真正的问题。

如果有任何建议，我将不胜感激。

谢谢。

Answer 1

您可以使用nativescript-fresco 插件。它是一个 {N} 插件，它封装了流行的 Fresco 库，用于在 Android 上管理图像。该插件公开了以下功能：设置淡入长度、placehdler 图像、错误图像（当下载不成功时）、圆角、通过纵横比进行动态调整等。有关高级属性的完整列表，您可以参考 this section 的自述文件。该插件还公开了一些有用的events，当从远程源检索图像时，您可以使用它们添加自定义逻辑。

为了使用插件，只需在应用程序的 onLaunch 事件中初始化它并调用 .initialize() 函数：

var application = require("application");
var fresco = require("nativescript-fresco");

if (application.android) {
    application.onLaunch = function (intent) {
        fresco.initialize();
    };
}

之后，只需将FrescoDrawee 放在页面中的某个位置并设置其imageUri：

<Page
    xmlns="http://www.nativescript.org/tns.xsd" 
    xmlns:nativescript-fresco="nativescript-fresco">
    <nativescript-fresco:FrescoDrawee width="250" height="250"
                                      imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
</Page>

Answer 2

所以经过一些研究，我想出了一个适合我的解决方案。这是我所做的：

• 当应用启动时，我创建了一个包含可观察对象列表的全局变量
• 然后我进行了 http 调用以获取所有对象并将它们加载到全局变量中

在视图中，我将图像显示为（图像是中继器项目模板的一部分）：

<Image loaded="imageLoaded" />

在 js 文件中，我将 imageLoaded 事件处理为：

var imageSource = require("image-source");

function imageLoaded(args) {
    var img = args.object;
    var bc = img.bindingContext;

    if (bc.Loaded) {
        img.imageSource = bc.ImageSource;
    } else {
        imageSource.fromUrl(bc.ImageURL).then(function (iSource) {
            img.imageSource = iSource;
            bc.set('ImageSource', iSource);
            bc.set('Loaded', true);
        });
    }
}

因此，在初始加载后，我将 imageSource 作为全局变量的一部分保存，并且在每个其他页面上，我都从那里获取它，并从 URL 加载它的后备是图像源不适用于此项目.

我知道这可能会引起一些关于我用于存储图像的内存量的担忧，但由于在我的情况下，我所说的图像不超过 2-3 个，我认为这种方法不会导致任何内存问题。

我很想听听有关如何使这种方法更有效或是否有更好的方法的任何反馈。

Answer 3

你试过吗？ https://github.com/VideoSpike/nativescript-web-image-cache

您可能希望为此使用社区插件。你也可以看看这个： https://docs.nativescript.org/cookbook/ui/image-cache