本机脚本加载图像

debugcn 发表于 Dev

dpdragnev

这是我的场景：在主视图上，我正在加载项目列表。每个项目都有一个imageURL属性。我将Image组件绑定到ImageURL属性。一切正常，但是在加载Image组件的过程中，图像需要花费额外的一两秒钟来加载。加载图像后，将正确显示“图像”组件。在渲染图像时，这会在页面上产生不希望的偏移。

相同的图像将在其他2个视图上渲染。

处理这种情况的最佳实践是什么？我尝试加载基数为64的字符串，而不是图像URL，该方法可以正常工作，但它显着减慢了初始视图的加载速度。

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

我将不胜感激。

谢谢你。

dpdragnev

因此，在进行了一些研究之后，我想出了一个对我有用的解决方案。这是我所做的：

应用启动时，我创建了一个包含可观察对象列表的全局变量
然后我进行了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个，因此我认为这种方法不会引起任何内存问题。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。