Maison > Article > développement back-end > Comment améliorer la vitesse d'accès du site Web PHP grâce au chargement paresseux ?

Comment améliorer la vitesse d'accès du site Web PHP grâce au chargement paresseux ?

WBOYoriginal: 2023-08-07 11:13:05680parcourir

Lazy Loading est une technologie d'optimisation courante qui peut améliorer la vitesse d'accès aux sites Web, réduire le chargement inutile de ressources et améliorer l'expérience utilisateur. Dans le développement de sites Web PHP, le chargement paresseux est généralement utilisé pour retarder le chargement d'images, de vidéos, de scripts et d'autres ressources.

Cet article présentera comment améliorer la vitesse d'accès du site Web PHP grâce au chargement paresseux et le démontrera à travers des exemples de code.

Utiliser la bibliothèque de plug-ins à chargement paresseux

Le chargement paresseux nécessite généralement l'aide de bibliothèques de plug-ins. Actuellement, il existe de nombreuses excellentes bibliothèques de chargement paresseux parmi lesquelles choisir, telles que Lazy Load, Unveil.js, etc. Ces bibliothèques de plug-ins peuvent être introduites via npm ou CDN, ce qui est pratique et rapide.

Ce qui suit est un exemple de code qui utilise la bibliothèque de plug-ins Lazy Load pour implémenter le chargement différé des images :

<!-- 在<head>标签中引入Lazy Load插件库 -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>

<!-- 在<img>标签中添加"data-src"属性，将图片的真实地址放到"data-src"中，同时添加"class"属性指定懒加载样式-->
<img class="lazy" data-src="path/to/your/image.jpg" alt="">

<!-- 在<script>标签中初始化Lazy Load插件 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    }
  });
</script>

Dans l'exemple de code ci-dessus, nous avons ajouté data-src21033287ab87ed0cb9d22b1db5f99d0e标签中添加了data-src属性，并将图片的真实地址赋值给data-src。同时，我们还添加了class属性来指定懒加载样式。

在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中，我们首先使用document.querySelectorAll方法选择了所有具有lazy类的图片，然后使用IntersectionObserver监听图片是否进入视窗。当图片进入视窗时，我们更新了src属性的值，将真实的图片地址赋给src，并移除lazy类，以显示真实图片。最后，我们调用observe方法开始观察所有的懒加载图片。

懒加载音视频资源

除了图片，懒加载也可以用于音视频资源。我们可以通过监听页面滚动事件，判断音视频元素是否在视窗范围内，并在需要时加载和播放。

以下是一个使用懒加载实现视频懒加载的示例代码：

<video src="path/to/your/video.mp4" controls muted loop autoplay preload="none" id="lazy-video"></video>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyVideo = document.getElementById("lazy-video");

    window.addEventListener("scroll", function() {
      var rect = lazyVideo.getBoundingClientRect();
      var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
      if (inViewPort) {
        lazyVideo.src = lazyVideo.dataset.src;
      }
    });
  });
</script>

在上述示例代码中，我们首先在39000f942b2545a5315c57fa3276f220标签中添加了preload="none"属性，以指定视频为不主动预加载。然后，我们在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中监听了页面滚动事件，并通过getBoundingClientRect方法获取视频元素的位置信息。最后，我们判断视频是否在视窗范围内，如果是，则将真实的视频地址赋给src

Dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, nous utilisons d'abord la méthode document.querySelectorAll pour sélectionner toutes les images avec la classe lazy, puis use IntersectionObserver surveille si l'image entre dans la fenêtre. Lorsque l'image entre dans la fenêtre, nous mettons à jour la valeur de l'attribut src, attribuons l'adresse réelle de l'image à src et supprimons la classe lazy .pour montrer de vraies images. Enfin, nous appelons la méthode observe pour commencer à observer toutes les images à chargement paresseux.

preload="none dans le <code>39000f942b2545a5315c57fa3276f220

3f1c4e4b6b16bbbd69b2ee476dc4f83a

getBoundingClientRect

src

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Traitement des formulaires PHP : traitement des données des cases à cocher et des cases à sélection multipleArticle suivant：Traitement des formulaires PHP : traitement des données des cases à cocher et des cases à sélection multiple

Articles Liés

Voir plus