Nativescript: Question/Request: determine if image fails to load or if its loading

Created on 17 Dec 2016 · 12Comments · Source: NativeScript/NativeScript

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Can we expect some image details like when it is loading, is the error has occurred while loading or has completed loaded.
This is one of the important one for a mobile application where the data is very slow.

https://nativescript.ideas.aha.io/ideas/NS-I-158

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Ya, I did but did not find any answer, even in community no one has idea about this.

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

iOS/Android/Both

Both

Please provide the following version numbers that your issue occurs with:

CLI: (run tns --version to fetch it)
Cross-platform modules: (check the 'version' attribute in the
node_modules/tns-core-modules/package.json file in your project)
Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
package.json file of your project)
Plugin(s): (look for the version number in the package.json file of your
project)

Please tell us how to recreate the issue in as much detail as possible.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

question

Source

MadhuSudhanBhaskar

Most helpful comment

@MadhuSudhanBhaskar you can create your the image source for your image with fromUrl method.
e.g.

var imageSource = require("image-source");
imageSource.fromUrl("https://www.google.com/images/errors/logo_sm_2.png")
    .then(function (res: imageSource.ImageSource) {
    // console.log("Successfully loaded");

    // myImg.imageSource = res;
}).catch(err => {
    // console.log("Somthing went wrong!");
})

NickIliev on 19 Dec 2016

😄1 👍1

All 12 comments

Hello @MadhuSudhanBhaskar,

The image module has already provided most of the functionalities you are describing.
You can use isLoading and isLoaded (boolean properties) to get the current state of the image. You can also creatae your loaded callback and get the EventData

e.g.
TypeScript:

export function onImageLoaded(args:EventData) {
    console.log(args.eventName);
    console.log(args.object);

    var img = <Image>args.object;

    console.log("img.isLoading: " + img.isLoading);
    console.log("img.isLoaded: " + img.isLoaded);
}

XML

<Image src="{{ url }}" loaded="onImageLoaded" />

However, if you need error callback you can use nativescript-fresco which provides you with failure callback

<nativescript-fresco:FrescoDrawee failure="onFailure"/>

NickIliev on 19 Dec 2016

@NickIliev I have seen the 'isLoading' property, but how do you decide if the image failed to load via http.
Have seen fresco, but again its only in Android not on IOS.
BTW while loading, we have to show a loader also.

MadhuSudhanBhaskar on 19 Dec 2016

👍1

@MadhuSudhanBhaskar you can create your the image source for your image with fromUrl method.
e.g.

var imageSource = require("image-source");
imageSource.fromUrl("https://www.google.com/images/errors/logo_sm_2.png")
    .then(function (res: imageSource.ImageSource) {
    // console.log("Successfully loaded");

    // myImg.imageSource = res;
}).catch(err => {
    // console.log("Somthing went wrong!");
})

NickIliev on 19 Dec 2016

😄1 👍1

@NickIliev So in that case, you have 10 images on load and on scroll the image list keep on growing. Not sure how to handle this in via fromURL way.

MadhuSudhanBhaskar on 19 Dec 2016

@NickIliev Best would be how to use it with
http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/overview
RadListView plugin from nativescript?

MadhuSudhanBhaskar on 19 Dec 2016

@MadhuSudhanBhaskar There is a POC application here which is using this scenario (RadListView dynamically loading tens or hundreds of photos from online API).

the XML page with the RadList here (UI-optimized for Android but works for iOS as well)
the code-behind which is simply initializing the data items here
and the model which is fetching the data here

What Is basically happening in those files is that we are creating an Observable model and this observable model has a property called _dataItems_ which we are using to populate the RadListView. For each item in these items, we are fetching the data including the image url which I will use for the src property.

So in our XML with the RadListView

<lv:RadListView items="{{ dataItems }}" loaded="onListLoaded" itemTap="onItemTap">

will pass through the binding context the array of items (each one has a property to store the url of the photo).
and then in the template for the list-view cell we are passing this property to the src property of the image.

<Image src="{{ imageUri }}" />

NickIliev on 19 Dec 2016

@NickIliev amazing this is what I am looking for.
But going by package.json I see you are using nativescript-fresco for android and for IOS nothing.
So in this case just for my knowledge should we not handle a error, fallback for IOS?

MadhuSudhanBhaskar on 19 Dec 2016

@MadhuSudhanBhaskar based on my experience iOS has considerably fewer problems when working with images. Still, error handling is important but when working data that is fetched from remote service then you can handle your errors with the http error callback. You can also make sure that your model is providing you with a valid object ( for example: in this case meaning that you should reject models with wrong imageUrl or non-existing one).

If this guard is not enough you can use the isLoaded and load a placeholder image if this property returns false with the loaded event (or apply your logic for handling non-loaded images).

NickIliev on 19 Dec 2016

@NickIliev I go by your answer, I just have one last problem here in IOS. Say in 2g or 3g network if the download is too very slow it will take time to load the image.
Android the plugin will take care of showing a busy image till the image is downloaded, how about iOS

MadhuSudhanBhaskar on 19 Dec 2016