Quelles sont les méthodes de chargement paresseux des images ?

Les méthodes de chargement paresseux des images incluent le chargement paresseux basé sur Intersection Observer, le chargement paresseux utilisant la surveillance des événements de défilement et le chargement paresseux utilisant setTimeout. Introduction détaillée : 1. Chargement paresseux basé sur Intersection Observer. Intersection Observer est une API fournie par le navigateur, qui peut surveiller si un élément entre dans la fenêtre d'affichage de l'utilisateur ; 2. Chargement paresseux à l'aide de la surveillance des événements de défilement, qui est jugée en surveillant les événements de défilement. etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Le chargement différé d'images est une technique d'optimisation des performances d'une page Web qui retarde le chargement des images sur la page, en les chargeant uniquement lorsque les images sont sur le point d'apparaître dans la fenêtre d'affichage de l'utilisateur. Cela réduit les temps de chargement des pages et améliore l’expérience utilisateur et les performances globales du site Web. Dans cet article, je présenterai plusieurs méthodes de chargement paresseux couramment utilisées pour les images.

1. Chargement paresseux basé sur Intersection Observer :

Intersection Observer est une API fournie par le navigateur qui peut surveiller si un élément entre dans la fenêtre d'affichage de l'utilisateur. En utilisant Intersection Observer, nous pouvons surveiller si les éléments de l'image sont visibles et les charger lorsque l'image entre dans la fenêtre. Cette méthode est non seulement simple et facile à utiliser, mais offre également de meilleures performances.

Ce qui suit est un exemple de code qui utilise Intersection Observer pour implémenter le chargement paresseux des 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. Chargement paresseux à l'aide de la surveillance des événements de défilement :

Cette méthode consiste à déterminer si l'image entre dans la fenêtre d'affichage en écoutant l'événement de défilement. . Pendant que l'utilisateur fait défiler la page, vérifiez si la position de chaque image est dans la fenêtre et si c'est le cas, chargez l'image.

Ce qui suit est un exemple de code qui utilise l'écoute d'événements de défilement pour implémenter le chargement paresseux des 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. Chargement paresseux à l'aide de setTimeout :

Cette méthode consiste à charger des images en définissant un délai. Lorsque la page est chargée, chargez d'abord une image d'espace réservé, puis utilisez setTimeout pour retarder le chargement de l'image réelle afin d'obtenir l'effet de chargement paresseux.

Ce qui suit est un exemple de code qui utilise setTimeout pour implémenter le chargement paresseux des 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); // 设置延迟时间，单位为毫秒
  });
});

Résumé :

Le chargement paresseux des images est une méthode efficace pour optimiser les performances des pages Web, ce qui peut réduire le temps de chargement des pages et améliorer l'expérience utilisateur. Cet article présente plusieurs méthodes de chargement différé couramment utilisées pour les images, notamment le chargement différé basé sur Intersection Observer, le chargement différé utilisant la surveillance des événements de défilement et le chargement différé utilisant setTimeout. Les développeurs peuvent choisir une méthode qui leur convient en fonction des besoins réels pour implémenter le chargement paresseux des images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!