我博客里的很多文章都有一张图片显示在首屏,最近我发现打开页面时这些图片会闪烁一下才渲染出来,视觉效果不好。我印象里以前没有这个问题,检查图片元素才发现 WordPress 自动给 img 元素添加了 decoding="async" 属性,去掉就好了。
MDN 文档:HTMLImageElement:decoding 属性
这个属性会让浏览器先渲染其他元素,之后才渲染图片。这导致图片不是随着页面一起渲染出来的(但会正常占据空间),而是在页面其他部分渲染之后突然显示图片,看起来像闪烁了一下。
在主题的 functions.php 里添加以下代码可以禁止这个属性:
// 禁止 WordPress 给文章中的 img 设置 decoding="async" 属性
add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
之后就正常了。