JavaScript and CSS failing to implement lazy loading with fade-in effect

Question

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load?

let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.25 // Visible by 25%
};

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting &&
      entry.target.className === 'lazyImage') {
      let imageUrl = entry.target.getAttribute('data-img');
      if (imageUrl) {
        entry.target.src = imageUrl;
        observer.unobserve(entry.target);
      }
    }
  });
}

let observer = new IntersectionObserver(callback, options)
observer.observe(document.querySelector('#lazyImageId'))

.lazyImage {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  object-fit: cover;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-md-6 col-sm-12 full-height">
  <img id="lazyImageId" class="lazyImage" data-img="./img/dog.jpeg" alt="" loading="lazy">
</div>

javascript css

Answer 1

Answer №1

If it's clear what you're asking, it seems like you want to trigger the fade-in animation only after the image has loaded completely.

When checking if an image has finished loading, I typically rely on two methods:

The HTMLImageElement complete attribute is a useful read-only attribute that indicates whether the image has fully loaded. However, continuously checking this attribute until it turns true before running the animation can be cumbersome.
The onload EventHandler triggers once the image has been entirely loaded. This allows us to wait for slow-loading images to finish loading before applying our animation effects.

By combining both these methods, your code will cater to scenarios where the image is already loaded or still in the process of loading while the script executes.

I slightly modified your callback function to incorporate the use of .complete and the .onload event handler

let callback = (entries, observer) => {
    entries.forEach(entry => {
        if(entry.isIntersecting && entry.target.className === 'lazyImage') {
              // Storing the img element in a variable since we'll need it
              let imgEle = entry.target;
              let imageUrl = imgEle.getAttribute('data-img');
            
              if(imageUrl) {
                  imgEle.src = imageUrl;
                
                  // Check if the image has already loaded, add our animation class if it has
                  if (imgEle.complete) {
                      imgEle.classList.add('animate');
                  } else {
                      // If the image hasn't fully loaded yet, add a listener to apply the class once it's done
                      imgEle.onload = () => {
                          imgEle.classList.add('animate');
                      };
                  }
  
                  observer.unobserve(entry.target);
              }
          }
      });
}

To handle the actual animation, I created an .animate class with the necessary CSS animations, which I then add to the image elements upon completion of loading.

.animate {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

You can also access a jsFiddle containing all the above content for testing purposes.

If this doesn't fully address your query, feel free to reach out for further adjustments or clarifications.

Answer 2

If it's clear what you're asking, it seems like you want to trigger the fade-in animation only after the image has loaded completely.

When checking if an image has finished loading, I typically rely on two methods:

The HTMLImageElement complete attribute is a useful read-only attribute that indicates whether the image has fully loaded. However, continuously checking this attribute until it turns true before running the animation can be cumbersome.
The onload EventHandler triggers once the image has been entirely loaded. This allows us to wait for slow-loading images to finish loading before applying our animation effects.

By combining both these methods, your code will cater to scenarios where the image is already loaded or still in the process of loading while the script executes.

I slightly modified your callback function to incorporate the use of .complete and the .onload event handler

let callback = (entries, observer) => {
    entries.forEach(entry => {
        if(entry.isIntersecting && entry.target.className === 'lazyImage') {
              // Storing the img element in a variable since we'll need it
              let imgEle = entry.target;
              let imageUrl = imgEle.getAttribute('data-img');
            
              if(imageUrl) {
                  imgEle.src = imageUrl;
                
                  // Check if the image has already loaded, add our animation class if it has
                  if (imgEle.complete) {
                      imgEle.classList.add('animate');
                  } else {
                      // If the image hasn't fully loaded yet, add a listener to apply the class once it's done
                      imgEle.onload = () => {
                          imgEle.classList.add('animate');
                      };
                  }
  
                  observer.unobserve(entry.target);
              }
          }
      });
}

To handle the actual animation, I created an .animate class with the necessary CSS animations, which I then add to the image elements upon completion of loading.

.animate {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

You can also access a jsFiddle containing all the above content for testing purposes.

If this doesn't fully address your query, feel free to reach out for further adjustments or clarifications.

Answer 3

Answer №2

My approach to this situation would involve assigning a class to the img element once it becomes visible, either .complete or onload:

if (imageUrl) {
   entry.target.src = imageUrl;
   observer.unobserve(entry.target);

   if (entry.target.complete) {
        entry.target.classList.add("visible");
      } else {
        entry.target.onload = function() {
        entry.target.classList.add("visible");
      }
    }
 }

[Above edited with onload function mentioned by @Amir]

To ensure that your img remains hidden until the animation is triggered, set its CSS property to opacity: 0;. Here's an example of CSS implementation:

.full-height {
  /* height for demonstration effect */
  height: 2000px;
}

.lazyImage {
  height: 100%;
  width: 100%;
  position: absolute;
  /* top position for effect*/
  top: 1000px;
  left: 0px;
  object-fit: cover;
  opacity: 0;
}

.lazyImage.visible {
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Once the img has the "visible" class, it can start animating.

Keep in mind that since the img tag is present in the DOM before the src loads, it may execute its animation before becoming visible.

.full-height {
  /* height for demonstration effect */
  height: 2000x;
}

.lazyImage {
  height: 100%;
  width: 100%;
  position: absolute;
  /* top position for effect*/
  top: 1000px;
  left: 0px;
  object-fit: cover;
  opacity: 0;
}

.lazyImage.visible {
  animation: fadeIn .5s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<div class="col-md-6 col-sm-12 full-height">
  <h1>Scroll Down</h1>
  <img id="lazyImageId" class="lazyImage" data-img="https://images.unsplash.com/photo-1620125587503-54b5365229de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="" loading="lazy">
</div>
<script>
  let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.25 // Visible by 25%
  };
  let callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting &&
        entry.target.className === 'lazyImage') {
        let imageUrl = entry.target.getAttribute('data-img');
        if (imageUrl) {
          entry.target.src = imageUrl;
          observer.unobserve(entry.target);
          if (entry.target.complete) {
            entry.target.classList.add("visible");
          } else {
            entry.target.onload = function() {
              entry.target.classList.add("visible");
            }
          }
        }
      }
    });
  }
  let observer = new IntersectionObserver(callback, options)
  observer.observe(document.querySelector('#lazyImageId'))
</script>

Codepen

Answer 4

My approach to this situation would involve assigning a class to the img element once it becomes visible, either .complete or onload:

if (imageUrl) {
   entry.target.src = imageUrl;
   observer.unobserve(entry.target);

   if (entry.target.complete) {
        entry.target.classList.add("visible");
      } else {
        entry.target.onload = function() {
        entry.target.classList.add("visible");
      }
    }
 }

[Above edited with onload function mentioned by @Amir]

To ensure that your img remains hidden until the animation is triggered, set its CSS property to opacity: 0;. Here's an example of CSS implementation:

.full-height {
  /* height for demonstration effect */
  height: 2000px;
}

.lazyImage {
  height: 100%;
  width: 100%;
  position: absolute;
  /* top position for effect*/
  top: 1000px;
  left: 0px;
  object-fit: cover;
  opacity: 0;
}

.lazyImage.visible {
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Once the img has the "visible" class, it can start animating.

Keep in mind that since the img tag is present in the DOM before the src loads, it may execute its animation before becoming visible.

.full-height {
  /* height for demonstration effect */
  height: 2000x;
}

.lazyImage {
  height: 100%;
  width: 100%;
  position: absolute;
  /* top position for effect*/
  top: 1000px;
  left: 0px;
  object-fit: cover;
  opacity: 0;
}

.lazyImage.visible {
  animation: fadeIn .5s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<div class="col-md-6 col-sm-12 full-height">
  <h1>Scroll Down</h1>
  <img id="lazyImageId" class="lazyImage" data-img="https://images.unsplash.com/photo-1620125587503-54b5365229de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80" alt="" loading="lazy">
</div>
<script>
  let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.25 // Visible by 25%
  };
  let callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting &&
        entry.target.className === 'lazyImage') {
        let imageUrl = entry.target.getAttribute('data-img');
        if (imageUrl) {
          entry.target.src = imageUrl;
          observer.unobserve(entry.target);
          if (entry.target.complete) {
            entry.target.classList.add("visible");
          } else {
            entry.target.onload = function() {
              entry.target.classList.add("visible");
            }
          }
        }
      }
    });
  }
  let observer = new IntersectionObserver(callback, options)
  observer.observe(document.querySelector('#lazyImageId'))
</script>

Codepen

JavaScript and CSS failing to implement lazy loading with fade-in effect

Answer №1

Answer №2

Similar questions

Experiencing issues with transferring JSON response from Axios to a data object causing errors

What is causing Mocha.js to be unable to locate the module?

Creating a hash map for an iteration through a jQuery collection

Is it possible to prioritize loading JavaScript before images on a webpage?

Having trouble launching the Socket.io Chat Demo? Encounter an issue with the error message at ..//

Traverse each child element sequentially using setTimeout or a delay function

Video background mute feature malfunctioning

Typescript HashMap implementation with Lists as values

Is there a way to display the inbox area upon completion of the document loading process?

Issue with showing error messages in view when using ejs templates

Discovering the final pattern using regular expressions

Tips on customizing the appearance of the "time" input type

Tips for repairing a button using a JavaScript function in an HTML document

Postpone the execution of the toggleClass function

What is the formula to determine the precise hue-rotate needed for producing a particular shade?

What are some ways to ensure that the promise from postgres is fulfilled before moving forward with my code execution?

Dividing the code into a function and invoking it does not produce the desired outcome

The functionality of React-router-dom protected routes seems to be malfunctioning

Tips for postponing a function's execution in order to ensure it has completely loaded

Webkit causing complications with straightforward CSS3 animation