您现在的位置是：首页 > WordPress教程WordPress教程

WordPress如何延迟加载图片

WP集市 2025-08-31 【WordPress教程】 889人已围观

先唠唠WordPress里图片加载那点事儿。你打开一个站，唰——满屏图直接糊脸，等半天才能滚屏，用户早跑了。延迟加载（Lazy Load）说白了就是“你看哪我才加载哪”，别让图片一口气全蹦出来。WordPress从5.5版本开始，其实已经给图片加上了原生延迟加载，但有时候你得自己拧拧螺丝。
核心原理就一句：给图片的<img>标签加个loading="lazy"属性。浏览器看到这个就懂了——“哦，这图得滚到附近再加载”。但WordPress默认只给主题内容里的图加，要是你用了特殊滑块或者自定义代码，可能得手动补一下。

比如你写文章时插了个图，输出代码长这样：

<img src="cat.jpg" alt="一只猫" class="55c6-617c-b627-b36f wp-image-233" />

系统自动会帮你改成：

<img src="cat.jpg" alt="一只猫" class="b627-b36f-cf83-f5d5 wp-image-233" loading="lazy" />

但如果你用FTP传图直接硬编码进模板？那不行，得自己写。

想给所有图片强行塞延迟加载？往主题的functions.php里怼这段：
```
add_filter('wp_img_tag_add_loading_attr', function($value, $image) {
return 'lazy';
}, 10, 2);
```
这钩子能让所有通过wp_get_attachment_image输出的图都带上lazy属性。注意啊，有些SEO插件会瞎改这个，得检查冲突。

特殊情况！首屏大图别延迟——否则用户第一眼看到空白更难受。可以用CSS判断首屏区域，或者用这种暴力方法：

if (!is_admin()) {
wp_enqueue_script('lazy-load-init', '你的JS路径', array(), null, true);
}

然后JS里写：

document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll("img:not(.hero-img)");
images.forEach(img => {
    if (img.getAttribute("loading") !== "lazy") {
        img.setAttribute("loading", "lazy");
    }
});
});

这样就能跳过带hero-img类的首屏图。