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

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

WBOY

Libérer： 2023-08-07 11:14:01

original

738 Les gens l'ont consulté

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

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>

Copier après la connexion

Dans l'exemple de code ci-dessus, nous avons ajouté data-src< dans le <code><img&gt ; tag /code> et attribuez la véritable adresse de l'image à data-src. Dans le même temps, nous avons également ajouté l'attribut class pour spécifier le style de chargement différé. <img>标签中添加了data-src属性，并将图片的真实地址赋值给data-src。同时，我们还添加了class属性来指定懒加载样式。

在<script>标签中，我们首先使用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>

Copier après la connexion

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

Dans la balise <script>, 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 <video> tag "

<script>

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!