启用 Lazy Loading（懒加载），仅在用户滚动到图片区域时加载，代码实例-中山市速科科技有限公司

启用 Lazy Loading（懒加载），仅在用户滚动到图片区域时加载，代码实例

发布时间 - 2025-03-12 点击率：66次

在PHP网站开发中，实现图片的**Lazy Loading（懒加载）**通常需要结合前端技术（如JavaScript）和后端PHP代码。PHP主要负责生成HTML结构，而懒加载的逻辑主要由JavaScript实现。以下是具体的实现方法：

1. 实现懒加载的基本步骤

HTML结构:

使用data-src属性代替src属性来存储图片的真实URL。
初始加载时，src属性可以设置为占位图或空。

JavaScript逻辑:

监听页面滚动事件。
检查图片是否进入可视区域。
将data-src的值赋给src，触发图片加载。

PHP部分:

动态生成带有data-src属性的图片标签。

2. 代码实现

PHP部分

php

复制

<?php// 假设从数据库或其他地方获取图片列表$images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // 更多图片...];foreach ($images as $image) {
    echo '<img class="lazy-load" data-src="' . htmlspecialchars($image) . '" src="placeholder.jpg" alt="Lazy Loaded Image">';}

说明:

data-src：存储图片的真实URL。
src：初始加载时显示的占位图（可以是小尺寸的占位图或空白图）。
class="lazy-load"：用于JavaScript选择需要懒加载的图片。

JavaScript部分

javascript

复制

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazy-load");

    // 懒加载逻辑
    const lazyLoad = () => {
        lazyImages.forEach((img) => {
            if (img.getAttribute("data-src") && isInViewport(img)) {
                img.src = img.getAttribute("data-src");
                img.removeAttribute("data-src"); // 移除 data-src，避免重复加载
                img.classList.remove("lazy-load"); // 移除懒加载类
            }
        });
    };

    // 检查图片是否进入可视区域
    const isInViewport = (element) => {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    // 初始加载
    lazyLoad();

    // 监听滚动事件
    window.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);});

说明:

isInViewport：检查图片是否进入可视区域。
lazyLoad：加载进入可视区域的图片。
监听scroll和resize事件，确保动态加载图片。

3. 优化懒加载

使用 Intersection Observer API

现代浏览器支持Intersection Observer API，可以更高效地实现懒加载，避免频繁计算图片位置。

javascript

复制

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazy-load");

    // Intersection Observer 回调函数
    const lazyLoad = (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.getAttribute("data-src");
                img.removeAttribute("data-src");
                img.classList.remove("lazy-load");
                observer.unobserve(img); // 停止观察已加载的图片
            }
        });
    };

    // 创建 Intersection Observer 实例
    const observer = new IntersectionObserver(lazyLoad, {
        rootMargin: "0px",
        threshold: 0.1, // 当图片 10% 进入可视区域时触发
    });

    // 观察所有懒加载图片
    lazyImages.forEach((img) => observer.observe(img));});

优点:

性能更好，避免频繁计算。
代码更简洁。

4. 占位图优化

使用低质量的占位图（如模糊的小图）作为src，提升用户体验。

示例：

html

复制

<img class="lazy-load" data-src="high-quality-image.jpg" src="blur-placeholder.jpg" alt="Lazy Loaded Image">

5. 完整示例

PHP + HTML

php

复制

<?php$images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // 更多图片...];foreach ($images as $image) {
    echo '<img class="lazy-load" data-src="' . htmlspecialchars($image) . '" src="placeholder.jpg" alt="Lazy Loaded Image">';}

JavaScript

javascript

复制

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazy-load");

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.getAttribute("data-src");
                img.removeAttribute("data-src");
                img.classList.remove("lazy-load");
                observer.unobserve(img);
            }
        });
    }, {
        threshold: 0.1,
    });

    lazyImages.forEach((img) => observer.observe(img));});