Question

Here is my scenario: On my main view I am loading a list of items. Each item has an imageURL property. I am binding an Image component to the ImageURL property. Everything works well, but the image takes an extra second or two to load during which time the Image component is collapsed. Once the image is loaded, the Image component is displayed properly. This creates an undesirable shift on the page as the image is rendered.

The same images are going to be rendered on 2 other views.

What is the best practice to handle this scenario? I tried loading the base 64 string instead of the image url, which worked, but it slowed down the loading of the initial view significantly.

How can I pre-fetch the images and reuse them as I navigate between the views? I was looking at the image-cache module which seems to be addressing the exact scenario, but the documentation is very vague and the only example I found (https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js) did not really address the same scenario. If I understood the code correctly, this is more about the virtual scrolling. In my case, I will have only 2-3 items, so the scrolling is not really a concern.

I would appreciate any advise.

Thank you.

Answer 1

Have you tried this? https://github.com/VideoSpike/nativescript-web-image-cache

You will likely want to use a community plugin for this. You can also take a look at this: https://docs.nativescript.org/cookbook/ui/image-cache

Answer 2

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

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

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

＆＃13;

<Image loaded="imageLoaded" />

＆＃13;

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

＆＃13;

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);
        });
    }
}

＆＃13;

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

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

我希望听到有关如何提高这种方法效率或完全采用更好方法的任何反馈意见。

Answer 3

您可以使用nativescript-fresco插件。这是一个{N}插件，它包含了流行的Fresco库，用于管理Android上的图像。该插件公开了以下功能：设置淡入长度，placehdler图像，错误图像（下载失败时），角落舍入，通过宽高比定义的dinamic大小等等，您可以参考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>

Nativescript Loading Images

3 个答案: