Animation data only start loading after lottie-web is loaded #3081
Comments
|
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
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
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-weband have our own host of both thelottie-webandloader.jsonfile.Here is an simplified version of our HTML page
What did you expect to happen?
I would like to have
lottie-webandloader.jsonto be download in parallel so whenlottie.loadAnimationis triggered, the animation is already in memory and ready to be usedWhat actually happened? Please include as much relevant detail as possible.
The
loader.jsononly start loading afterlottie-webis downloadedThe text was updated successfully, but these errors were encountered: