Wie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?

Wie optimiert man den Lazy-Loading-Effekt von Bildern durch PHP-Funktionen?

Mit der Entwicklung des Internets nimmt die Anzahl der Bilder auf Webseiten zu, was die Ladegeschwindigkeit der Seite unter Druck setzt. Um die Benutzererfahrung zu verbessern und die Ladezeit zu verkürzen, können wir die Bild-Lazy-Loading-Technologie verwenden. Das verzögerte Laden von Bildern kann das Laden von Bildern verzögern. Bilder werden nur geladen, wenn der Benutzer zum sichtbaren Bereich scrollt, was die Ladezeit der Seite verkürzen und das Benutzererlebnis verbessern kann.

Beim Schreiben von PHP-Webseiten können wir den Lazy-Loading-Effekt von Bildern optimieren, indem wir einige Funktionen schreiben. Im Folgenden wird ausführlich beschrieben, wie das verzögerte Laden von Bildern über PHP-Funktionen implementiert wird.

Der erste Schritt besteht darin, alle Bildlinks abzurufen.
Zuerst müssen wir die Links zu allen Bildern auf der aktuellen Seite abrufen. Dies kann durch die Verwendung der Funktion preg_match_all und regulärer Ausdrücke erreicht werden, wie unten gezeigt: preg_match_all 函数和正则表达式来实现，如下所示：

function get_image_urls($html) {
    $pattern = '/<img [^ alt="Wie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?" >]+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="Wie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?" > 标签的 data-src 属性来保存图片的真实链接，使用占位符显示图片。

function generate_placeholder($image_url) {
    return '<img  src="placeholder.jpg" class="lazy" data-src="' . $image_url . '" alt="Wie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?" >';
}

$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

Der zweite Schritt besteht darin, Bildplatzhalter zu generieren

Bevor die Seite geladen wird, müssen wir jeden träge laden. Generieren Sie einen Platzhalter für das Bild, wodurch eine Neuanordnung des Seitenlayouts vermieden werden kann. Wir können das Attribut data-src des Tags <img alt="Wie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?" > verwenden, um den tatsächlichen Link des Bildes zu speichern und einen Platzhalter zum Anzeigen des Bildes zu verwenden.
rrreee

Im obigen Code ist placeholder.jpg ein Platzhalterbild und kann je nach tatsächlicher Situation durch andere Bilder ersetzt werden. Die Klasse lazy kann verwendet werden, um verzögert geladene Bilder zu identifizieren.

Der dritte Schritt besteht darin, das Scroll-Ereignis der Seite zu überwachen. 🎜Wir müssen das Scrollverhalten des Benutzers überwachen. Wenn der Benutzer zum sichtbaren Bereich des Bildes scrollt, weisen wir den tatsächlichen Link des Bildes dem src zu -Attribut zum Implementieren des Ladebilds. 🎜rrreee🎜Im obigen Code verwenden wir JavaScript, um das Scroll-Ereignis der Seite abzuhören und basierend darauf, ob das Bild im sichtbaren Bereich liegt, zu bestimmen, ob das Bild geladen werden soll. 🎜🎜Der vierte Schritt: Stiloptimierung🎜Um das Benutzererlebnis zu optimieren, können wir den Bildern einige progressive Ladeeffekte hinzufügen, z. B. Ein- und Ausblendeffekte. Dies kann durch CSS erreicht werden. 🎜rrreee🎜In CSS legen wir einen Übergangseffekt für die Klasse .lazy fest. Wenn das Bild geladen ist, fügen Sie die Klasse .show hinzu, um das Bild anzuzeigen. 🎜🎜Zusammenfassung🎜Durch die obige PHP-Funktion können wir den Lazy-Loading-Effekt von Bildern erzielen. Rufen Sie zunächst die Links aller Bilder auf der Seite ab, generieren Sie dann Platzhalter, überwachen Sie Seitenlaufereignisse, um zu bestimmen, ob Bilder geladen werden sollen, und fügen Sie eine Stiloptimierung hinzu. Dadurch kann die Ladezeit der Seite effektiv verkürzt und die Benutzererfahrung verbessert werden. 🎜🎜Der oben bereitgestellte Code ist nur ein Beispiel. Sie können ihn entsprechend Ihren Anforderungen und der tatsächlichen Situation ändern und optimieren. Hoffe es hilft! 🎜

Das obige ist der detaillierte Inhalt vonWie kann der Lazy-Loading-Effekt von Bildern durch PHP-Funktionen optimiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!