Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?
Bagaimana untuk meningkatkan kelajuan akses laman web PHP melalui pemuatan malas?
- WBOYasal
- 2023-08-07 11:13:05680semak imbas
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>Dalam kod sampel di atas, kami menambahkan data-srcc4ea0c96315d6bace9dacc886e0c825c标签中添加了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
3f1c4e4b6b16bbbd69b2ee476dc4f83a, 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.
- Malas memuatkan sumber audio dan video🎜🎜🎜Selain gambar, malas memuatkan juga boleh digunakan untuk sumber audio dan video. Kami boleh memantau acara tatal halaman untuk menentukan sama ada elemen audio dan video berada dalam tetingkap, dan memuatkan serta memainkannya apabila diperlukan. 🎜🎜Berikut ialah kod sampel yang menggunakan pemuatan malas untuk melaksanakan pemuatan malas video: 🎜rrreee🎜Dalam kod sampel di atas, kami mula-mula menambahkan
preload="none dalam <code>39000f942b2545a5315c57fa3276f220 tag "harta benda untuk menyatakan bahawa video tidak dimuatkan secara automatik. Kemudian, kami mendengar acara tatal halaman dalam teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a dan memperoleh maklumat kedudukan elemen video melalui kaedah getBoundingClientRect. Akhir sekali, kami menentukan sama ada video berada dalam julat tetingkap Jika ya, tetapkan alamat video sebenar kepada atribut src untuk mula memuatkan dan memainkan video. 🎜🎜Melalui teknologi pemuatan malas, kami boleh mengurangkan jumlah sumber semasa memuatkan halaman awal, dengan itu meningkatkan kelajuan akses tapak web PHP dan memberikan pengalaman pengguna yang lebih baik. Saya harap prinsip pemuatan malas dan kod sampel yang diperkenalkan dalam artikel ini boleh membantu anda. 🎜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!