How to use JavaScript to achieve the fade-in effect of lazy loading of images?

How to use JavaScript to achieve the fade-in effect of lazy loading of images?

In modern web design, in order to improve user experience and website performance, lazy loading of images has become a common technology. Lazy loading of images can reduce initial load time by delaying the loading of images until the user scrolls to where they are. Additionally, to further enhance the user experience, adding a fade-in effect can make the page smoother and more attractive. In this article, we will learn how to use JavaScript to implement the fade-in effect of lazy loading of images.

The first step is to determine which images need to be lazy loaded. Usually, we set the src attribute of the img tag to empty, and then save the real image address in a custom attribute, such as data-src. In this way, the image will not be loaded when the page is loaded. Only when the user scrolls to the location of the image, the real image address will be loaded and rendered.

<img class="lazy-img lazy"  src="/static/imghwm/default1.png"  data-src="path/to/image.jpg"  data- alt="Lazy Image">

Next, we need to add some JavaScript code to achieve the lazy loading effect. We will listen for user scroll events and check which images are within the viewable area. For pictures in the visible area, we assign their real address (that is, the value of the data-src attribute) to the src attribute to load the picture.

// 获取所有拥有lazy-img类的图片元素
const lazyImages = document.querySelectorAll('.lazy-img');

// 监听用户滚动事件
window.addEventListener('scroll', function() {
  // 循环遍历所有图片元素
  for (let i = 0; i < lazyImages.length; i++) {
    // 检查图片元素是否在可视区域内
    if (isInViewport(lazyImages[i])) {
      // 将真实的图片地址赋给src属性
      lazyImages[i].src = lazyImages[i].getAttribute('data-src');
      // 添加淡入效果
      lazyImages[i].classList.add('fade-in');
    }
  }
});

// 检查元素是否在可视区域内的函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}

In the above code, we use an isInViewport() function to check whether the picture element is within the visible area. This function obtains the position information of the element by calling the getBoundingClientRect() method and compares it with the height and width of the window. Returns true if the element is within the visible area.

Finally, we can also add a fade-in effect to the image so that it displays smoothly on the page after loading. We add a fade-in class to the image element, so that after the image is loaded, the CSS transition effect will be triggered to achieve the fade-in animation effect.

.lazy-img {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.lazy-img.fade-in {
  opacity: 1;
}

In the above code, we set the opacity of the image to 0 initially, and then gradually transition it to full opacity (i.e. 1) using a CSS transition effect. This process lasts for 0.3 seconds and is carried out in a gradual manner.

Through the above steps, we can use JavaScript to achieve the fade-in effect of lazy loading of images. Not only does this improve website performance and user experience, it also makes the website look smoother and more attractive. Hope this article helps you!

The above is the detailed content of How to use JavaScript to achieve the fade-in effect of lazy loading of images?. For more information, please follow other related articles on the PHP Chinese website!