I'm writing an animation of a movement on scroll via javascript, similiar to what Apple does here: https://www.apple.com/airpods-pro/ (the moving Air Pods)
When running my website local on PC, the animation works just fine - fluent. Running it on my webspace results in an extremely jerky experience.
The basic problem: One animation consists of about 200 pictures. These pictures get downloaded as they are called in javascript, which obviously is way too late. Through Dev Tools I've found out that Apple deals with the problem by downloading all of the images as soon as the page is loaded.
How can I realise that via Javascript? Through what commands can I initiate that a picture gets downloaded?
Also: The downloads of my websites' pictures often get interrupted (I've found that out via the Dev Tools), how can I avoid that?
Thank you in advance!
All the best
Simon Benedikt Fischer