# Event listener image loaded

**URL:** <https://forum.lottiefiles.com/t/event-listener-image-loaded/5484>\
**Category:** Lottie in Web\
**Created:** [March 17, 2024, 8:25am UTC](https://forum.lottiefiles.com/t/event-listener-image-loaded/5484 "2024-03-17T08:25:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Itamar](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/itamar/32/3317_2.png) [@Itamar](https://forum.lottiefiles.com/u/Itamar)\
**Post date:** [March 17, 2024, 8:25am UTC](https://forum.lottiefiles.com/t/event-listener-image-loaded/5484/1 "2024-03-17T08:25:19Z")

</div>

I’m loading an image dynamically and want to display the Lottie only when the image has been fully loaded.

How to add such an event listener?

Many Thanks!  
Itamar.

---

<div class="post-metadata">

**Author:** ![Aisha](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/aisha/32/2816_2.png) [@Aisha](https://forum.lottiefiles.com/u/Aisha)\
**Post date:** [April 1, 2025, 6:52am UTC](https://forum.lottiefiles.com/t/event-listener-image-loaded/5484/4 "2025-04-01T06:52:25Z")

</div>

> [@Itamar](#):
>
> I’m loading an image dynamically [EZPassMD](https://www-ezpassmd.com) and want to display the Lottie only when the image has been fully loaded.
> 
> How to add such an event listener?
> 
> Many Thanks!  
> Itamar.

```javascript
function loadImageWithLottie(imageUrl, imageElementId, lottieElementId, lottieAnimationData) {
  const imageElement = document.getElementById(imageElementId);
  const lottieElement = document.getElementById(lottieElementId);

  // Initially, hide the Lottie animation
  lottieElement.style.display = 'none';

  // Create a new image object to load the image
  const img = new Image();

  img.onload = function() {
    // Image loaded successfully
    imageElement.src = imageUrl;

    // Show the image
    imageElement.style.display = 'block';

    // Show the Lottie animation
    lottieElement.style.display = 'block';

    // Initialize and play the Lottie animation
    lottie.loadAnimation({
      container: lottieElement, // the dom element that will contain the animation
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: lottieAnimationData, // the animation data
    });
  };

  img.onerror = function() {
    // Image failed to load, handle the error (e.g., show a placeholder image)
    console.error('Failed to load image:', imageUrl);
    imageElement.src = 'placeholder.jpg'; // or any placeholder.
    imageElement.style.display = 'block';
    lottieElement.style.display = 'none'; //hide lottie on error
  };

  // Start loading the image
  img.src = imageUrl;
}

// Example usage:
// Assuming you have an image element with id 'myImage' and a Lottie container with id 'myLottie'
// and your Lottie animation data is in a variable called 'myLottieJson'

// loadImageWithLottie('your_image_url.jpg', 'myImage', 'myLottie', myLottieJson);

//Example html
/*
<img id="myImage" style="display: none;" />
<div id="myLottie" style="display: none;"></div>
*/

```

**Explanation:**

1. **`loadImageWithLottie(imageUrl, imageElementId, lottieElementId, lottieAnimationData)`:**

2. **`imageElement.style.display = 'none';` and `lottieElement.style.display = 'none';`:**

3. **`const img = new Image();`:**

4. **`img.onload = function() { ... }`:**

5. **`img.onerror = function() { ... }`:**

6. **`img.src = imageUrl;`:**

**How to Use:**

1. **Include Lottie Library:** Make sure you have the Lottie Web library included in your HTML.
2. **Create HTML Elements:** Create an `<img>` element for the image and a `<div>` element for the Lottie animation. Give them unique IDs (e.g., `myImage` and `myLottie`).
3. **Get Lottie Data:** Obtain your Lottie animation data (usually a JSON object) and store it in a JavaScript variable (e.g., `myLottieJson`).
4. **Call the Function:** Call the `loadImageWithLottie()` function, passing the image URL, the IDs of the elements, and the Lottie animation data.

This approach ensures that the Lottie animation is only displayed after the image has been fully loaded, providing a smoother user experience.