There are two main ways to implement HTML5 lazy loading images: 1. Use the loading="lazy" property of the tag, which is suitable for modern browsers without JS; 2. Use the Intersection Observer API to achieve more flexible control and compatibility with old browsers. When using loading="lazy", you should be careful not to apply to the first screen image, and it has three values: auto, lazy, and eager. Intersection Observer needs to store the real address through data-src and assign src when entering the viewport. At the same time, you should pay attention to setting fixed width and height, using placeholder maps, avoiding lazy loading of important images, and combining srcset and cache strategies to optimize experience and performance.

Lazy loading of images has actually become very simple in HTML5, and it mainly relies on the loading attribute of the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175233613755932.jpeg" class="lazy" alt="How to lazy load images in HTML5?" > tag. You only need to add a property and the browser can automatically delay loading pictures that are not in the viewport.

Using loading="lazy" is the most direct way

HTML5 natively supports lazy loading is to add loading="lazy" attribute to the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175233613858057.jpeg" class="lazy" alt="How to lazy load images in HTML5?" > tag. In this way, the browser will wait until the image is close to the user's visual area before starting to load.

For example:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Descriptive text" loading="lazy">

This method is suitable for most modern browsers (Chrome, Edge, Firefox, etc.) and does not require additional JS or complicated configurations.

A few points to note:

• It is not recommended to use lazy loading for the first screen image, as it may affect the loading speed and SEO;
• loading has three values: auto , lazy and eager , the default is auto , that is, the browser decides whether to lazy load;
• If you want to be compatible with old browsers (such as IE), you have to use JavaScript's Intersection Observer to implement it.

Work with Intersection Observer to achieve more flexible control

If you need more control or want to be compatible with some browsers that do not support loading="lazy" , you can use the Intersection Observer API.

The basic idea is to first let the image occupy a place, and then assign the real image address to src attribute when it enters the visual area.

The sample code is as follows:

 <img class="lazy-img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  data- alt="descriptive text">

Then write a JS to listen to whether it enters the viewport:

 const images = document.querySelectorAll('.lazy-img');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

This method is suitable for projects that require animation, load optimization, or high compatibility requirements.

You should also pay attention to user experience if you lazy load pictures

Although lazy loading can improve performance, if it is not processed properly, users may see blank areas for too long, which will affect the experience.

you can:

• Set a fixed width and height for the picture to prevent layout jitter;
• Displays the placeholder map or skeleton screen before loading;
• For important pictures (such as carousels), do not use lazy loading;
• Use srcset and sizes at the same time, allowing the browser to select the appropriate image size according to the device.

In addition, if you are loading pictures from the server, make sure to set up appropriate caching policies and response headers to avoid repeated requests affecting loading speed.

Basically that's it. The native lazy loading function of HTML5 is already very practical, and can achieve more granular control with JS. The key is to choose the right method according to the project needs. Don’t use lazy loading all of them, and don’t use them at all. The key is to balance the performance and experience.

The above is the detailed content of How to lazy load images in HTML5?. For more information, please follow other related articles on the PHP Chinese website!