What are the methods for lazy loading of images?

The methods for lazy loading of images include lazy loading based on Intersection Observer, lazy loading using scroll event monitoring, and lazy loading using setTimeout. Detailed introduction: 1. Lazy loading based on Intersection Observer. Intersection Observer is an API provided by the browser, which can monitor whether an element enters the user's viewport; 2. Lazy loading using scroll event monitoring, which is judged by monitoring scroll events. etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

Image lazy loading is a technique for optimizing web page performance. It delays the loading of images on the page and loads them only when the images are about to appear in the user's viewport. This reduces page load times and improves user experience and overall website performance. In this article, I will introduce several commonly used lazy loading methods for images.

1. Lazy loading based on Intersection Observer:

Intersection Observer is an API provided by the browser that can monitor whether an element enters the user's viewport. By using the Intersection Observer, we can monitor whether image elements are visible and load them when the image enters the viewport. This method is not only simple and easy to use, but also has better performance.

The following is a sample code that uses Intersection Observer to implement lazy loading of images:

// 创建一个Intersection Observer实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 当图片进入视口时加载它
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
// 获取所有需要懒加载的图片元素，并添加观察者
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach((lazyImage) => {
  observer.observe(lazyImage);
});

2. Lazy loading using scroll event monitoring:

This method is by monitoring scrolling event to determine whether the picture enters the viewport. As the user scrolls the page, check whether the position of each image is in the viewport, and if so, load the image.

The following is a sample code that uses scroll event listening to implement lazy loading of images:

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove(&#39;lazy&#39;);
    }
  });
});

3. Lazy loading using setTimeout:

This method is to set a delay Time to load images. When the page is loaded, first load a placeholder image, and then use setTimeout to delay loading of the real image to achieve the lazy loading effect.

The following is a sample code that uses setTimeout to implement lazy loading of images:

window.addEventListener('load', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach((lazyImage) => {
    lazyImage.src = lazyImage.dataset.placeholder;
    setTimeout(() => {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
    }, 1000); // 设置延迟时间，单位为毫秒
  });
});

Summary:

Lazy loading of images is an effective way to optimize web page performance and can reduce Page loading time and improved user experience. This article introduces several commonly used lazy loading methods for images, including lazy loading based on Intersection Observer, lazy loading using scroll event monitoring, and lazy loading using setTimeout. Developers can choose a method that suits them based on actual needs to implement lazy loading of images.

The above is the detailed content of What are the methods for lazy loading of images?. For more information, please follow other related articles on the PHP Chinese website!