You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey,
so I've added a preloader to my shopify website and used the dotlottie animation. It's only shown once in a session and only on the main page.
Via HTML I preload the .lottie file and the animation plays, after the DOM Content has completely loaded, to ensure, the timer syncs with the animation.
const loader = document.getElementById("loader");
$('#loader').hide();
}
$(document).ready(function() {
if (document.cookie.indexOf("preloaderShown=true") === -1) {
document.cookie = "preloaderShown=true; path=/";
window.onload = function() {
const player = document.querySelector('dotlottie-player');
player.load('https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie');
setTimeout(function() {
hidePreloader();
}, 3100);
};
The animation hides, after the preloader has completely loaded.
} else {
// If the preloader has already been shown in this session, hide it immediately
$('#loader').hide();
}
});
The Problem
Sometimes the animation skips some frames and lags, especially on mobile devices. It doesn't matter if your connection is slow or fast, since the animation only loads after the page is completely loaded.
How it looks when it bugs:
RPReplay_Final1704895547.MP4
How it should look like:
RPReplay_Final1704895617.MP4
This is also reproduceable on desktop. Sometimes it lags, sometimes not. Hope some1 can help me.
Consuming repo
What repo were you working in when this issue occurred?
Overview
Hey,
so I've added a preloader to my shopify website and used the dotlottie animation. It's only shown once in a session and only on the main page.
Via HTML I preload the .lottie file and the animation plays, after the DOM Content has completely loaded, to ensure, the timer syncs with the animation.
My html:
My javascript
preloader.js
The Problem
Sometimes the animation skips some frames and lags, especially on mobile devices. It doesn't matter if your connection is slow or fast, since the animation only loads after the page is completely loaded.
RPReplay_Final1704895547.MP4
RPReplay_Final1704895617.MP4
This is also reproduceable on desktop. Sometimes it lags, sometimes not. Hope some1 can help me.
Consuming repo
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>...
Labels
Type: Bug
label to this issue.The text was updated successfully, but these errors were encountered: