Wordpress 5.5 自定义 img 标签上的延迟加载答案

【问题标题】：Wordpress 5.5 Lazy Loading on Custom img TagsWordpress 5.5 自定义 img 标签上的延迟加载
【发布时间】：2020-08-26 19:45:20
【问题描述】：

有没有办法在自定义 img 标签上触发 Wordpress 5.5 延迟加载功能？

This article 提到“默认情况下，WordPress 会在所有具有 width 和 height 属性的 img 标签中添加 loading="lazy"。”

当我尝试通过 wp_get_attachment_image() 添加图像时，它确实添加了 loading="lazy" 和 srcset 属性，但是当我尝试添加设置了宽度和高度的普通 img 标签时，并没有添加这些属性.是否需要设置其他类才能触发延迟加载？或者还有什么需要的吗？

&lt;img src="https://via.placeholder.com/300/" alt="placeholder" width="300" height="110"&gt;

【问题讨论】：

【解决方案1】：

您只需在添加图片时手动将loading="lazy" 属性添加到HTML / 代码中的图片，类似于添加高度和宽度的方式，例如

<img src="https://via.placeholder.com/300/" 
     alt="placeholder" 
     width="300" 
     height="110"
     loading="lazy"
 >

浏览器支持

许多浏览器支持延迟加载，但并非所有浏览器都支持 - 您可以在此处查看 Browser Support for lazy loading attribute

Wordpress 支持参考

作为WP 5.5. Development update says，WordPress 5.5 将为以下图片添加 loading="lazy" 属性：

对于未以这种方式添加的任何图像，您需要自己手动添加。

【讨论】：

哦，好吧。我试过了，但它并没有像从 wp_get_attachment_image() 中那样添加 srcset 属性，所以我不确定它们是否真的被延迟加载了。
@kierrapalmer 延迟加载和 srcset 不相关，WP 确实添加了两者，但那是在图像处理中添加两个不同的功能。如果延迟加载不适合您，请检查您的浏览器是否支持。并非所有浏览器都支持延迟加载属性，我在答案中添加了一个链接，该链接与最新的浏览器对该属性的支持保持同步。