# Poster frame on slow loading jsons

**URL:** <https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801>\
**Category:** Uncategorized\
**Created:** [September 2, 2023, 3:56am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801 "2023-09-02T03:56:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/michael/32/2816_2.png) [@Michael](https://forum.lottiefiles.com/u/Michael)\
**Post date:** [September 2, 2023, 3:56am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801/1 "2023-09-02T03:56:59Z")

</div>

Hi all, I’m hoping for help with 2 issues.

First is that i’m getting this error on a page with multiple Lottie jsons;

Uncaught DOMException: CustomElementRegistry.define: ‘lottie-player’ has already been defined as a custom element

I’m loading the Lottie player via a html module in Beaver Builder. Initially I used the Lottie module, but i could’t control the animation on scroll in Motion.page unless I used the html module. I’ve only added

once, as I’m aware adding multiple times can cause the page to break.

Any ideas what I need to change? Baring in mind i’m a designer not a coder!

Second is that my animations are large, due to the fact that the client supplied them without knowing Lottie limitations. I could only get it to work by optimising a png sequence.

The load time is too long, due to 1.5mb optimised json files. Does anyone know if it is possible to set a ‘poster’ image that displays the first frame of the animation upon load?

Any assistance would be hugely appreciated!

---

<div class="post-metadata">

**Author:** ![Harley](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/harley/32/2816_2.png) [@Harley](https://forum.lottiefiles.com/u/Harley)\
**Post date:** [September 7, 2023, 5:36am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801/2 "2023-09-07T05:36:07Z")

</div>

You can reduce load times for large Lottie animations, you can set a poster image that displays the first frame of the animation upon load. You can achieve this by creating a static image representing the first frame and displaying it before initializing the Lottie animation.

---

<div class="post-metadata">

**Author:** ![Lay\_Kheng](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/lay_kheng/32/3036_2.png) [@Lay\_Kheng](https://forum.lottiefiles.com/u/Lay_Kheng)\
**Post date:** [September 8, 2023, 2:11am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801/3 "2023-09-08T02:11:04Z")

</div>

Hi, it seems that the page has already defined the “lottie player” and are defining it again. Try to check for the name “lottie player” and remove it, see if it works.

---

<div class="post-metadata">

**Author:** ![Lay\_Kheng](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/lay_kheng/32/3036_2.png) [@Lay\_Kheng](https://forum.lottiefiles.com/u/Lay_Kheng)\
**Post date:** [September 8, 2023, 2:14am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801/4 "2023-09-08T02:14:42Z")

</div>

Did you try to optimize the animations file in your workspace?

---

<div class="post-metadata">

**Author:** ![Michael](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/michael/32/2816_2.png) [@Michael](https://forum.lottiefiles.com/u/Michael)\
**Post date:** [September 8, 2023, 2:36am UTC](https://forum.lottiefiles.com/t/poster-frame-on-slow-loading-jsons/4801/5 "2023-09-08T02:36:01Z")

</div>

Hi, thanks I’ll try removing the Lottie player. It should only appear once on the page, correct?

I’ve optimised the png’s as much as possible, without loss of quality.

I’m hoping for a solution whereby I can have a placeholder/poster image that loads before the animation loads.

Is this possible?

Thanks  
Mike