Comment utiliser JavaScript pour obtenir l'effet de fondu du chargement paresseux des images ?

Comment utiliser JavaScript pour obtenir l'effet de fondu du chargement paresseux des images ?

Dans la conception Web moderne, afin d'améliorer l'expérience utilisateur et les performances du site Web, le chargement paresseux des images est devenu une technologie courante. Le chargement paresseux des images peut réduire le temps de chargement initial en retardant le chargement des images jusqu'à ce que l'utilisateur les fasse défiler jusqu'à leur emplacement. De plus, pour améliorer encore l'expérience utilisateur, l'ajout d'un effet de fondu peut rendre la page plus fluide et plus attrayante. Dans cet article, nous apprendrons comment utiliser JavaScript pour implémenter l'effet de fondu du chargement paresseux des images.

La première étape consiste à déterminer quelles images doivent être chargées paresseusement. Habituellement, nous définissons l'attribut src de la balise img sur vide, puis enregistrons l'adresse réelle de l'image dans un attribut personnalisé, tel que data-src. De cette façon, l'image ne sera pas chargée lorsque la page est chargée. Ce n'est que lorsque l'utilisateur fait défiler jusqu'à l'emplacement de l'image que l'adresse réelle de l'image sera chargée et rendue.

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

Ensuite, nous devons ajouter du code JavaScript pour obtenir l'effet de chargement paresseux. Nous écouterons les événements de défilement des utilisateurs et vérifierons quelles images se trouvent dans la zone visible. Pour les images dans la zone visible, nous attribuons leur adresse réelle (c'est-à-dire la valeur de l'attribut data-src) à l'attribut src pour charger l'image.

// 获取所有拥有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));
}

Dans le code ci-dessus, nous utilisons une fonction isInViewport() pour vérifier si l'élément d'image se trouve dans la zone visible. Cette fonction obtient les informations de position de l'élément en appelant la méthode getBoundingClientRect() et les compare avec la hauteur et la largeur de la fenêtre. Renvoie vrai si l'élément se trouve dans la zone visible.

Enfin, nous pouvons également ajouter un effet de fondu à l'image afin qu'elle s'affiche fluidement sur la page après le chargement. Nous ajoutons une classe de fondu entrant à l'élément image, de sorte qu'une fois l'image chargée, l'effet de transition CSS soit déclenché pour obtenir l'effet d'animation de fondu entrant.

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

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

Dans le code ci-dessus, nous définissons initialement l'opacité de l'image sur 0, puis la passons progressivement vers une opacité totale (c'est-à-dire 1) à l'aide d'un effet de transition CSS. Ce processus dure 0,3 seconde et s'effectue de manière progressive.

Grâce aux étapes ci-dessus, nous pouvons utiliser JavaScript pour obtenir l'effet de fondu du chargement paresseux des images. Non seulement cela améliore les performances du site Web et l’expérience utilisateur, mais cela rend également le site Web plus fluide et plus attrayant. J'espère que cet article vous aidera !

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!