You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改WooCommerce图片懒加载属性?移除loading="lazy"方法

移除图片loading="lazy"属性的可行方案(针对你的WordPress站点)

从你提供的图片代码看,这是WooCommerce的商品缩略图,这类loading="lazy"属性一般是WordPress 5.5版本之后默认添加的,或是主题/第三方插件额外设置的。不建议直接修改WordPress核心PHP/JS文件(更新后改动会丢失),推荐用以下几种安全方式处理:

1. 用WordPress钩子全局移除(最稳妥)

打开你当前主题的functions.php文件(路径:wp-content/themes/你的主题名/),添加这段代码:

// 关闭WordPress默认的图片懒加载属性
add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );

如果只想针对WooCommerce商品图片移除,用更精准的代码:

// 仅移除WooCommerce商品缩略图的懒加载
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
    if ( 'woocommerce_thumbnail' === $context ) {
        return false;
    }
    return $value;
}, 10, 3 );

2. 排查主题/插件的懒加载设置

如果上面的方法没效果,说明是主题或第三方优化插件(比如Smush、WP Rocket这类)添加的:

  • 先看主题后台的「性能」「图片设置」板块,找有没有“图片懒加载”的开关,直接关闭
  • 检查已安装的插件,找到带懒加载功能的插件,要么在插件设置里关闭该功能,要么暂时禁用插件测试

要是非得改主题的PHP文件(不推荐,建议用子主题修改避免更新丢失),可以找主题里处理商品图片的模板文件,比如woocommerce/single-product/product-image.php,搜索loading="lazy"后删除对应属性,操作前记得备份文件。

3. 用JS临时移除(应急方案)

如果不想碰PHP,也可以用JS在页面加载时动态移除属性,在主题的「自定义JS」或footer.php里添加这段代码:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('img[loading="lazy"]').forEach(img => img.removeAttribute('loading'));
});

注意:修改主题文件前,一定要先备份文件,避免操作失误导致网站无法访问。

内容的提问来源于stack exchange,提问作者Coline

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 15:05:19