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

Question

是否可以在自定义 img 标签上触发 Wordpress 5.5 延迟加载功能？

This article 提到“默认情况下，WordPress 会向所有具有宽度和高度属性的 img 标签添加 loading="lazy"。"

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

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

Answer 1

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

<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" 属性：

• post 内容中的图像 (the_content)
• post 节选中的图像（the_excerpt）
• 文本小部件中的图像（widget_text_content）
• 头像图片（get_avatar）
• 模板图像使用 wp_get_attachment_image() (wp_get_attachment_image)

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