suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Wie kann die Zugriffsgeschwindigkeit einer PHP-Website durch Lazy Loading verbessert werden?

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

WBOY
WBOYOriginal
2023-08-07 11:13:05716Durchsuche

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.

  1. 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>

Im obigen Beispielcode haben wir data-src0cf63632816ff3b68881c6946f08519f标签中添加了data-src属性，并将图片的真实地址赋值给data-src。同时，我们还添加了class属性来指定懒加载样式。

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

  1. 懒加载音视频资源

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

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

<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

Im Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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.

    Lazy Loading von Audio- und Videoressourcen🎜🎜🎜Neben Bildern kann Lazy Loading auch für Audio- und Videoressourcen verwendet werden. Wir können das Seiten-Scroll-Ereignis überwachen, um festzustellen, ob sich die Audio- und Videoelemente im Fenster befinden, und sie bei Bedarf laden und abspielen. 🎜🎜Das Folgende ist ein Beispielcode, der Lazy Loading verwendet, um Lazy Loading von Videos zu implementieren: 🎜rrreee🎜Im obigen Beispielcode haben wir zuerst preload="none im <code>39000f942b2545a5315c57fa3276f220hinzugefügt > tag „Eigenschaft, um anzugeben, dass das Video nicht automatisch vorgeladen wird. Dann haben wir uns das Seiten-Scroll-Ereignis im Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a angehört und die Positionsinformationen des Videoelements über die Methode getBoundingClientRect abgerufen. Schließlich stellen wir fest, ob sich das Video innerhalb des Fensterbereichs befindet. Wenn ja, weisen wir dem Attribut src die tatsächliche Videoadresse zu, um mit dem Laden und Abspielen des Videos zu beginnen. 🎜🎜Durch die Lazy-Loading-Technologie können wir die Menge an Ressourcen beim Laden der ersten Seite reduzieren, wodurch die Zugriffsgeschwindigkeit der PHP-Website erhöht und ein besseres Benutzererlebnis bereitgestellt wird. Ich hoffe, dass das in diesem Artikel vorgestellte Lazy-Loading-Prinzip und der Beispielcode für Sie hilfreich sein können. 🎜

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PHP-Formularverarbeitung: Datenverarbeitung mit Kontrollkästchen und MehrfachauswahlfeldernNächster Artikel：PHP-Formularverarbeitung: Datenverarbeitung mit Kontrollkästchen und Mehrfachauswahlfeldern

In Verbindung stehende Artikel

Mehr sehen