//Technical difficulties cycling through vector images when placed in an array in a dataset

Ask the community
,
1

Dear website together folders,

I made a website with a lot of animations and learned to pause things while other things happen and to animate things one by one.

Sadly, on iOS it feels like there is a memory leak, and I assume this is because of my page selector of my website its glorified content flipper part because this consists of +30 *.svg images or vector images and these are stored as an URL array, and I cycle through this array to create a sprite animation of sorts.

[URL1, URL2, URL3]

Now my question:

If you store images like this in a dataset, are they also preloaded and cached?

I know that adding a website address is most likely not allowed but I investigated this myself for a very long time and cannot find the bug causing this in my code and I am sort of running out of ideas.

On Android and Windows Edge, I got it working but on iOS after a while using the website page the images start loading in horribly slow when you turn a page.

www.wouldyoulikecoffee.com

Do something with my cookie banner and click the symbol to get to the website page that I am talking about.

If anyone knows how to fix this and could tell me, I would be very thankful.

2

Well, I use a function to calculate screen dimension and I made this async because it was not linked to the graphical pipeline also one of my animations got triggered often while not needed.

I collapsed certain elements that where not needed on all devices, and it is faster also instead of setting variable every time, I tried to set them at load when possible.

Sadly, it still slows down after a while.

3

I found this how can I change the Changing policy to:

Cache-Control: public, max-age=31536000

5

hey there, absolutely amazing site! I’ve tried to do the review with Browser Stack iPhone 14 Pro, it did load well for me, still let us take a look over the situation with this problematic loading, could you send here the video on the slow loading and how long should it take for this problem to start appearing on the iPhone?

6

Thank you!

If was not the loading of the website that was slow but the memory buffer filling up on iOS and this made the loading in of the images of the pages in my glorified content flipper slower while time passed by.

So, this happened after the website was loaded and while using it.

However, I fixed it.

It was my character breathing animation. This was completely set after every onComplete(); even when the screen size stayed the same.

I added a piece of code that checks if screen dimensions changed and if not, it will not add them again, but it will just keep repeating it.

Doing this resulted in the memory leak to be gone.

Thank you, you made a very cool tool, and it is truly amazing what you can fold together with it.

1 Like
7

//Postscript

After further investigation:

When you create an animation and reset it with new values by doing for example this:

import wixAnimations from 'wix-animations';

let animation= wixAnimations.timeline({
    "repeat": -1,
    "repeatDelay": 2000,
    "yoyo": false
});

async function preCalculate(callback) {

    wixWindow.getBoundingRect()

        .then((windowSizeInfo) => {
            if (windowWidth !== null) {

                windowHeight = windowSizeInfo.window.height;
                windowWidth = windowSizeInfo.window.width;
          
            callback();
}
        });

}

function adaptAnimation(){
//Fix 
animation.pause();

animation= wixAnimations.timeline({
    "repeat": -1,
    "repeatDelay": 2000,
    "yoyo": false
});

  animation.add(($w('#element')), { "y": windowHeight/20, "duration": 3000, easing: 'easeInOutQuad' }, 0);

animation.play().onComplete(()=>{
preCalculate(()=>{
adaptAnimation();
})
})
}

//To enlighten you

When you do this without the animation.pause() the onComplete() listener of the previous one keeps firing leading into a small memory leak on iOS.