loaded event?

[3rror404]

I see that there is a isLoading property that we can query but is there any sort of loaded event that we can use?

I need to display two images at exactly the same time. Currently I'm querying isLoaded in setInterval loop and setting the parent elements opacity to 1 when both isLoaded = true but this doesn't this doesn't work very well.

Even though both images report that they have finished loading they aren't actually both displayed at that point.

Is there any way I can tell when an image has been fully loaded and rendered in the <IC:WebImage> element?

function loadQuestionImages(question) {
    var imageSRC_1 = question.SurveyItemImages[0].URL;
    var imageSRC_2 = question.SurveyItemImages[1].URL;

    function imagesLoaded() {
        var image1_orig = page.getViewById('question-1-image');
        var image2_orig = page.getViewById('question-2-image');

        image1_orig.src = imageSRC_1;
        image2_orig.src = imageSRC_2;

        let id = timer.setInterval(() => {
            console.log('image1_orig.isLoading', question.SurveyItemImages[0].URL, image1_orig.isLoading);
            console.log('image2_orig.isLoading', question.SurveyItemImages[1].URL, image2_orig.isLoading);

            if (!image1_orig.isLoading && !image2_orig.isLoading) {
                timer.clearInterval(id);
                showImages();
            }         
        }, 50);
    }
}

function showImages() {
    questionsWrap.style.opacity = 1;
}

[bathejasumeet]

I could wire calling a callback when an image loads, but that code would go in the same place where isLoading is set in the module. Think of it in this way. The loaded event itself sets the isLoading property. I doubt if calling a callback at the loaded event would resolve this. It would be nothing more than syntactic sugar I reckon. Which platform are you currently on?

[JoeyHengst]

@bathejasumeet would be cool if I could do something like this though:

<WebImage stretch="aspectFill" row="1" #listImage (loaded)="animateImage(listImage)" [src]="item.downloadUrl"></WebImage>

animateImage(img: Image) {
        return new Promise((resolve, reject) => {
            img.animate({
                duration: 500,
                opacity: 1,
                curve: enums.AnimationCurve.easeIn
            }).then(() => {
                img.animate({
                    duration: 500,
                    scale: { x: 1.0, y: 1.0 },
                    curve: enums.AnimationCurve.easeOut
                }).then(() => {
                    resolve();
                });
            });
        });
    }

So I can do some sort of animation on the image when its loaded. ngAfterViewInit isn't suitable for me.

[gabitoesmiapodo]

Can you know if the isLoading property changed?

I get the element with @Viewchild in AfterViewInit, and at that point if I'm downloading an image from the internet I get isLoading == true.

That value seems to never change after that, except if I check regularly with setInterval(...) (something I'd prefer no to do...).

But I'd like to know if the image ended loading and, for example, stop showing an ActivityIndicator.

[alexandruantonica]

Hi guys, Does anyone solve this problem? Thanks

[3rror404]

Hey @alexandruantonica, I ended up just using the core image-source module and manually triggering garbage collection when the images were no longer needed.

This might not be suitable for your use case but there are more details here: https://github.com/NativeScript/NativeScript/issues/3887

[abhayastudios]

Agree that a (loaded) event would be a nice addition!

Thanks for this great plugin :)