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

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

Seeking guidance on creating an uncomplicated CSS tooltip

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events

Tips for modifying the language of an Angular Application's OneTrust Cookie Banner

Applying Tailwind styles to dynamically inserted child nodes within a parent div

What could be the reason for the body background color refusing to change

Having trouble retrieving data from the json file

The "smiley" character added to the information during an Ajax call

What is causing my reusable component to malfunction when used in conjunction with the "setInterval" function?

Maintain the div's aspect ratio by adjusting its width according to its height

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Background cutting off right side of HTML website

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a

Using a single package manager for both backend and frontend development - is it possible? (Yarn/NPM)

Vue automatically refreshes momentjs dates prior to making changes to the array

The Input element's onChange event is not functioning as expected

Share a URL and display small previews from it - php

What purpose does the "io" cookie serve in Socket.IO?

A guide on incorporating unique font weights into Material UI

Choose a Different Value for Another HTML Element's Class