Wie kann die Zugriffsgeschwindigkeit einer PHP-Website durch Lazy Loading verbessert werden?-PHP-Tutorial-php.cn

Wie kann die Zugriffsgeschwindigkeit einer PHP-Website durch Lazy Loading verbessert werden?

WBOY

Freigeben： 2023-08-07 11:14:01

Original

740 Leute haben es durchsucht

Wie kann die Zugriffsgeschwindigkeit einer PHP-Website durch Lazy Loading verbessert werden?

Lazy Loading ist eine gängige Optimierungstechnologie, die die Geschwindigkeit des Website-Zugriffs verbessern, unnötiges Laden von Ressourcen reduzieren und die Benutzererfahrung verbessern kann. Bei der Entwicklung von PHP-Websites wird Lazy Loading normalerweise verwendet, um das Laden von Bildern, Videos, Skripten und anderen Ressourcen zu verzögern.

In diesem Artikel erfahren Sie, wie Sie die Zugriffsgeschwindigkeit von PHP-Websites durch verzögertes Laden verbessern können, und demonstrieren dies anhand von Codebeispielen.

Verwenden Sie die Plug-In-Bibliothek zum verzögerten Laden.

Das verzögerte Laden erfordert normalerweise die Hilfe von Plug-In-Bibliotheken. Derzeit stehen viele hervorragende Lazy-Loading-Bibliotheken zur Auswahl, z. B. Lazy Load, Unveil.js usw. Diese Plug-in-Bibliotheken können bequem und schnell über npm oder CDN eingeführt werden.

Das Folgende ist ein Beispielcode, der die Lazy Load-Plug-in-Bibliothek verwendet, um das verzögerte Laden von Bildern zu implementieren:

<!-- 在<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>

Nach dem Login kopieren

Im obigen Beispielcode haben wir data-src< im <code><img&gt hinzugefügt ;-Tag /code>-Attribut und weisen Sie data-src die tatsächliche Adresse des Bildes zu. Gleichzeitig haben wir auch das Attribut class hinzugefügt, um den Lazy-Loading-Stil anzugeben. <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>

Nach dem Login kopieren

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

Im Tag <script> verwenden wir zunächst die Methode document.querySelectorAll, um alle Bilder mit der Klasse lazy auszuwählen, und dann Verwenden Sie IntersectionObserver, um zu überwachen, ob das Bild in das Fenster gelangt. Wenn das Bild das Fenster betritt, aktualisieren wir den Wert des Attributs src, weisen src die echte Bildadresse zu und entfernen die Klasse lazy . um echte Bilder zu zeigen. Schließlich rufen wir die Methode observe auf, um mit der Beobachtung aller Lazy-Loading-Bilder zu beginnen.

preload="none im <video>hinzugefügt > tag „

<script>

getBoundingClientRect

src

Das obige ist der detaillierte Inhalt vonWie kann die Zugriffsgeschwindigkeit einer PHP-Website durch Lazy Loading verbessert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!