Nativescript 加载图像

Question

这是我的场景：在我的主视图中，我正在加载一个项目列表。每个项目都有一个 imageURL 属性。我正在将图像组件绑定到 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

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

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

Answer 2

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

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

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

<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

您可以使用 nativescript-fresco plugin-in. It is an {N} plugin that is wrapping the popular Fresco library for managing images on Android. The plugin exposes functionality like: setting fade-in length, placehdler images, error images (when download is unsuccessful), corner rounding, dinamic sizing via aspect ration etc. for the full list of the advanced attributes you can refer this section of the readme. Also the plugin exposes some useful 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>

Nativescript 加载图像

Nativescript Loading Images

nativescript