Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?-tutorial php-php.cn

Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?

WBOY

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

asal

740 orang telah melayarinya

Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?

Lazy Loading ialah teknologi pengoptimuman biasa yang boleh meningkatkan kelajuan akses tapak web, mengurangkan pemuatan sumber yang tidak perlu dan meningkatkan pengalaman pengguna. Dalam pembangunan laman web PHP, pemuatan malas biasanya digunakan untuk melambatkan pemuatan imej, video, skrip dan sumber lain.

Artikel ini akan memperkenalkan cara meningkatkan kelajuan akses tapak web PHP melalui pemuatan malas, dan menunjukkannya melalui contoh kod.

Gunakan perpustakaan pemalam memuatkan malas

Pemuatan malas biasanya memerlukan bantuan perpustakaan pemalam. Pada masa ini, terdapat banyak perpustakaan pemuatan malas yang sangat baik untuk dipilih, seperti Lazy Load, Unveil.js, dsb. Pustaka pemalam ini boleh diperkenalkan melalui npm atau CDN, yang mudah dan pantas.

Berikut ialah contoh kod yang menggunakan perpustakaan pemalam Lazy Load untuk melaksanakan pemuatan malas imej:

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

Salin selepas log masuk

Dalam kod sampel di atas, kami menambahkan data-src< dalam <code><img&gt ; tag /code> atribut, dan tetapkan alamat sebenar imej kepada data-src. Pada masa yang sama, kami juga menambah atribut class untuk menentukan gaya pemuatan malas. <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>

Salin selepas log masuk

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

Dalam teg <script>, kami mula-mula menggunakan kaedah document.querySelectorAll untuk memilih semua imej dengan kelas lazy, dan kemudian gunakan IntersectionObserver memantau sama ada imej memasuki tetingkap. Apabila imej memasuki tetingkap, kami mengemas kini nilai atribut src, menetapkan alamat imej sebenar kepada src dan mengalih keluar kelas lazy untuk menunjukkan gambar sebenar. Akhir sekali, kami memanggil kaedah memerhati untuk mula memerhati semua imej yang malas memuatkan.

preload="none dalam <video> tag "

<script>

getBoundingClientRect

src

Atas ialah kandungan terperinci Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!