Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?

Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi PHP?

Dengan perkembangan Internet, bilangan imej pada halaman web semakin meningkat, yang memberi tekanan kepada kelajuan memuatkan halaman. Untuk meningkatkan pengalaman pengguna dan mengurangkan masa pemuatan, kami boleh menggunakan teknologi pemuatan malas imej. Memuatkan imej yang malas boleh melambatkan pemuatan imej hanya dimuatkan apabila pengguna menatal ke kawasan yang boleh dilihat, yang boleh mengurangkan masa memuatkan halaman dan meningkatkan pengalaman pengguna.

Apabila menulis halaman web PHP, kami boleh mengoptimumkan kesan pemuatan malas imej dengan menulis beberapa fungsi. Berikut menerangkan secara terperinci cara melaksanakan pemuatan malas imej melalui fungsi PHP.

Langkah pertama ialah mendapatkan semua pautan imej
Pertama, kita perlu mendapatkan pautan ke semua imej dalam halaman semasa. Ini boleh dicapai dengan menggunakan fungsi preg_match_all dan ungkapan biasa, seperti yang ditunjukkan di bawah: preg_match_all 函数和正则表达式来实现，如下所示：

function get_image_urls($html) {
    $pattern = '/<img [^ alt="Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?" >]+src=["']([^"']+)["'][^>]*>/i';
    preg_match_all($pattern, $html, $matches);
    return $matches[1];
}

$html = file_get_contents('http://example.com');
$image_urls = get_image_urls($html);

第二步，生成图片占位符
在页面加载完成之前，我们需要为每个要懒加载的图片生成一个占位符，这样可以避免页面布局的重排。我们可以使用 <img alt="Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?" > 标签的 data-src 属性来保存图片的真实链接，使用占位符显示图片。

function generate_placeholder($image_url) {
    return '<img  src="placeholder.jpg" class="lazy" data-src="' . $image_url . '" alt="Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?" >';
}

$placeholders = array_map('generate_placeholder', $image_urls);

在上述代码中，placeholder.jpg 是一个占位图片，可以根据实际情况替换为其他图片。lazy 类可以用于标识延迟加载的图片。

第三步，监听页面滚动事件
我们需要监测用户的滚动行为，当用户滚动到图片的可视区域时，我们将图片的真实链接赋值给 src 属性，实现图片的加载。

function load_image($image_url) {
    echo "<script>
        window.addEventListener('scroll', function() {
            var images = document.querySelectorAll('.lazy');
            Array.prototype.forEach.call(images, function(image) {
                var rect = image.getBoundingClientRect();
                if(rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
                    image.src = image.dataset.src;
                    image.classList.remove('lazy');
                }
            });
        });
    </script>";
}

array_map('load_image', $image_urls);

在上述代码中，我们使用 JavaScript 来监听页面的滚动事件，并根据图片是否在可视区域内来判断是否加载图片。

第四步，样式优化
为了优化用户体验，我们可以给图片添加一些渐进加载的效果，如淡入淡出效果。可以通过 CSS 来实现。

.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.show {
    opacity: 1;
}

在 CSS 中，我们为 .lazy 类设置了一个过渡效果。当图片加载完成后，添加 .showrrreee

Langkah kedua ialah menjana ruang letak imej

Sebelum halaman dimuatkan, kita perlu malas memuatkan setiap imej menjana ruang letak, yang boleh mengelakkan penyusunan semula susun atur halaman. Kita boleh menggunakan atribut data-src bagi teg <img alt="Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?" > untuk menyimpan pautan sebenar imej dan menggunakan ruang letak untuk memaparkan imej.
rrreee

Dalam kod di atas, placeholder.jpg ialah imej pemegang tempat dan boleh digantikan dengan imej lain mengikut situasi sebenar. Kelas lazy boleh digunakan untuk mengenal pasti imej yang dimuatkan malas.

Langkah ketiga ialah memantau acara tatal halaman🎜Kami perlu memantau tingkah laku menatal pengguna Apabila pengguna menatal ke kawasan imej yang kelihatan, kami menetapkan pautan sebenar imej kepada src. atribut untuk melaksanakan imej pemuatan. 🎜rrreee🎜Dalam kod di atas, kami menggunakan JavaScript untuk mendengar acara tatal halaman dan menentukan sama ada untuk memuatkan imej berdasarkan sama ada imej itu berada dalam kawasan yang boleh dilihat. 🎜🎜Langkah keempat, pengoptimuman gaya🎜Untuk mengoptimumkan pengalaman pengguna, kami boleh menambah beberapa kesan pemuatan progresif pada imej, seperti kesan fade-in dan fade-out. Ini boleh dicapai melalui CSS. 🎜rrreee🎜Dalam CSS, kami menetapkan kesan peralihan untuk kelas .lazy. Apabila imej dimuatkan, tambahkan kelas .show untuk memaparkan imej. 🎜🎜Ringkasan🎜Melalui fungsi PHP di atas, kita boleh mencapai kesan pemuatan malas imej. Mula-mula, dapatkan pautan semua imej pada halaman, kemudian jana ruang letak, dengar acara tatal halaman untuk menentukan sama ada untuk memuatkan imej dan menambah pengoptimuman gaya. Ini boleh mengurangkan masa memuatkan halaman dengan berkesan dan meningkatkan pengalaman pengguna. 🎜🎜Kod yang diberikan di atas hanyalah contoh, anda boleh mengubah suai dan mengoptimumkannya mengikut keperluan dan situasi sebenar anda. Semoga ia membantu! 🎜

Atas ialah kandungan terperinci Bagaimana untuk mengoptimumkan kesan pemuatan malas imej melalui fungsi php?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!