lottie-web
lottie-web copied to clipboard
airbnb
Animation data only start loading after lottie-web is loaded
Tell us about your environment It is a simple web page that has an onload animation and we are trying to make the loading icon to be loaded as quickly as possible.
Is there a way to load the JSON file and lottie library at the same time?
- Browser and Browser Version: Chrome latest
-
After Effects Version:
lottie.version="5.12.2"
What did you do? Please explain the steps you took before you encountered the problem.
We are using an self hosted lottie-web and have our own host of both the lottie-web and loader.json file.
Here is an simplified version of our HTML page
<!DOCTYPE html>
<html>
<body>
<div id="loading-icon" class="center-content" style="width: 120px; height: 120px;"></div>
<script type="text/javascript" src="https://some-domain.com/assets/lottie-web/"></script>
<script type="text/javascript">
lottie.loadAnimation({
container: document.getElementById('loading-icon'),
renderer: 'canvas',
loop: true,
autoplay: true,
path: 'https://some-domain.com/assets/loader.json'
});
</script>
</body>
</html>
What did you expect to happen?
I would like to have lottie-web and loader.json to be download in parallel so when lottie.loadAnimation is triggered, the animation is already in memory and ready to be used
What actually happened? Please include as much relevant detail as possible.
The loader.json only start loading after lottie-web is downloaded
After updating the page to have preload fetch, and adding the credentials and cors setting according to this post
<!DOCTYPE html>
<html>
<link rel="preload" as="fetch" href="https://some-domain.com/data/loader.json">
<body>
<div id="loading-icon" class="center-content" style="width: 120px; height: 120px;"></div>
<script type="text/javascript" src="https://some-domain.com/assets/lottie-web/"></script>
<script type="text/javascript">
fetch('https://some-domain.com/data/loader.json',
{
method: 'GET',
credentials: 'include',
mode: 'no-cors',
})
.then((response) => response.json())
.then((data) => {
lottie.loadAnimation({
container: document.getElementById('loading-icon'),
renderer: 'canvas',
loop: true,
autoplay: true,
animationData: data
});
}).catch(console.error);
</script>
</body>
</html>
Seems like both lottie-web and loader.json can be download in parallel on page load, but I got stuck at response.json() with the following error
Uncaught (in promise) SyntaxError: Unexpected end of input