Event listener image loaded

Lottie in Web
1

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.

4 
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):

    • This function takes the image URL, the ID of the image element, the ID of the Lottie container, and the Lottie animation data as input.

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

    • Initially, both the image and the Lottie container are hidden.

  3. const img = new Image();:

    • A new Image object is created to load the image in the background.

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

    • This event listener is executed when the image has finished loading successfully.
    • Inside the onload handler:
      • imageElement.src = imageUrl;: The loaded image is set as the source of the imageElement.
      • imageElement.style.display = 'block';: The image is made visible.
      • lottieElement.style.display = 'block';: the Lottie animation container is made visible.
      • lottie.loadAnimation(...): The Lottie animation is initialized and played.

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

    • This event listener handles cases where the image fails to load.
    • Inside the onerror handler:
      • An error message is logged to the console.
      • A placeholder image is displayed in the imageElement.
      • The Lottie animation is hidden.

  6. img.src = imageUrl;:

    • The image loading process is started by setting the src property of the Image object.

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.