当前位置：首页 > PHP

php 实现图片延时加载图片

2026-04-03 01:50:29PHP

延迟加载图片的原理

延迟加载（Lazy Load）是一种优化网页性能的技术，通过推迟非关键资源的加载（如图片）直到它们即将进入视口（viewport）时才加载。这可以减少初始页面加载时间，节省带宽。

实现方法

使用纯PHP和JavaScript实现

HTML部分 将图片的src属性替换为data-src，并添加一个占位符或低分辨率图片作为初始显示：

php 实现图片延时加载图片

<img data-src="path/to/real-image.jpg" src="path/to/placeholder.jpg" class="lazyload" alt="Description">

JavaScript部分 监听滚动事件，当图片进入视口时替换data-src为src：

document.addEventListener("DOMContentLoaded", function() {
    const lazyloadImages = document.querySelectorAll(".lazyload");

    const imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove("lazyload");
                observer.unobserve(img);
            }
        });
    });

    lazyloadImages.forEach(function(img) {
        imageObserver.observe(img);
    });
});

使用PHP生成动态图片路径

在PHP中动态生成图片路径时，可以结合上述方法：

php 实现图片延时加载图片

<?php
$imagePath = "path/to/real-image.jpg";
$placeholderPath = "path/to/placeholder.jpg";
?>
<img data-src="<?php echo $imagePath; ?>" src="<?php echo $placeholderPath; ?>" class="lazyload" alt="Description">

使用第三方库

Lozad.js 一个轻量级的延迟加载库，支持图片、iframe等：

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
    const observer = lozad('.lazyload');
    observer.observe();
</script>

LazySizes 功能更丰富的延迟加载库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
<img data-src="path/to/image.jpg" class="lazyload" alt="Description">

优化建议

占位符：使用低分辨率图片或纯色占位符，避免布局偏移。
阈值：设置IntersectionObserver的rootMargin提前加载图片，避免用户看到加载过程。
响应式图片：结合srcset和sizes属性优化不同设备的图片加载：

<img data-src="large.jpg" data-srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px" class="lazyload" alt="Description">