如何禁用WordPress 5.5+内置的图片延迟加载功能,该功能对于开发者有哪些要求?

  • 如何禁用WordPress 5.5+内置的图片延迟加载功能,该功能对于开发者有哪些要求?已关闭评论
  • 5,755 视图
  • A+
所属分类:WordPress源码

心语家园 https://www.xinyucn.cc/ 为非盈利网站,纯公益性质,所有软件和插件均免费下载。象征性收取的少许费用,完全是为了维持网站运营,支付服务器费用。且收费有助于防止采集和拷贝。由于有些软件主题插件升级频繁,导致汉化不完全,如果你购买后发现此问题,可通过网站顶部“私信本站”反馈,我们将尽快完善汉化。

正文开始:

WordPress 5.5 正式版发布,内置了图片延迟加载功用,也就是我们常说的LazyLoad。但是内置的这个LazyLoad,是基于阅读器内置功用完成的。要理解更多的技术细节,请看 WordPress 5.5 内置图像延迟加载功用,关于开发者有哪些请求?

 

如何禁用WordPress 5.5+内置的图片延迟加载功能,该功能对于开发者有哪些要求?

先不说WordPress 5.5内置的延迟加载的适配性如何,单说很多网站都是主题内置或经过插件完成的图片延迟加载,当多个延迟加载功用混用的时分,问题就呈现了,图片莫明其妙就无法正常显现了。

那如何处理这个呈现的问题呢?如今引荐的做法就是禁用掉WordPress 5.5内置的图片延迟加载功用。这也是最为牢靠和便利的办法。

只需求将下面的代码添加到所用主题的 functions.php 即可禁用:

add_filter('wp_lazy_loading_enabled', '__return_false');

假如你不懂折腾代码,直接下载装置 Disable Lazy Loading 插件也能够。

内置图像延迟加载功能,对于开发者有哪些要求?

从WordPress 5.5开端,WordPress会默许运用本地的HTML loading属性,为图像添加延迟加载,这将极大地俭省效劳器和带宽资源,进步了网站加载速度,提升了用户体验。

默许状况下,WordPress将添加loading="lazy"到一切具有widthheight属性的img标签。从技术上讲,这是在页面输出上处置的,相似于经过添加srcsetsizes属性来完成响应式图像的方式。为了进步这两个功用的效劳器端性能,引入了一个新函数wp_filter_content_tags(),因而只需求解析一次img标签,然后将对这些功用的修正推延到更详细的功用上即可。

减少规划偏移是先决条件

现代网站中常见的用户体验问题是所谓的规划移位( layout shifting),通常是由图像等媒体资源加载迟缓惹起的:默许状况下,只要在加载图像后,阅读器才干正确地规划页面,从而产生内容,例如在图片下方移位。经过在img标签上提供widthheight属性能够轻松处理此问题,由于阅读器将运用它们来肯定图像的长宽比,从而能够在实践加载图像之前推断页面规划。

固然这曾经是没有延迟加载图像的主要问题,但是关于延迟加载,它变得愈加重要。因而,WordPress将仅添加loading="lazy"到同时具有widthheight属性的img标签中。同时,处理基本问题关于总体上减少规划转移也同样重要,这就是为什么WordPress5.5将在img标签不存在widthheight属性时自动补充这两个属性。要做到这一点,Wordpress曾经重建了某些逻辑,用于肯定srcsetsizes属性。与这些属性一样,widthheight只能肯定图像能否用于WordPress附件以及img 标签能否包含相关wp-image-$id类。

WordPress不断遵照这种最佳做法,并且正在努力确保编辑器中的一切图像都具有widthheight。只需主题的CSS能够与经典编辑器内容一同正常工作,回填这些属性就不会对主题产生任何影响。这是能够预期的:假如图像的widthheight经过CSS修正,则相应的其他属性应设置为auto,以防止图像被拉伸。

有关此更改的更多背景信息,请参见#50367。

自定义延迟加载

默许状况下,WordPress将向以下图像添加loading="lazy"属性:

  • 文章内容中的图片(the_content
  • 摘要中的图片(the_excerpt
  • 文本小工具的图片(widget_text_content
  • 头像图片(get_avatar
  • 运用wp_get_attachment_image()的模板图像

开发人员能够经过各种过滤器来自定义此行为,最根底的过滤器是wp_lazy_loading_enabled,该过滤器接纳以下参数:

  • $default:布尔默许true到过滤器。
  • $tag_name:HTML标签称号。虽然依照当前的WordPress行为一直是img,但应留意,loading属性是通用属性,未来可能会扩展为支持其他元素,例如iframe
  • $context:上下文字符串作为附加参数,指示图像在技术上的来源,通常是WordPress挂钩称号。依据WordPress自身如何运用延迟加载,上下文能够是这篇文章列表中括号中的五个值之一。

例如,假如您希望默许状况下关闭模板图像的延迟加载,则能够运用以下代码段:

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_template_image_lazy_loading',
    10,
    3
);

为了修正非特定的图像的加载属性,有两种不同的办法,详细取决于图像的类型:

关于呈现在内容相关的图像(例如the_contentthe_excerptwidget_text_content),可用另一个新的过滤器wp_img_tag_add_loading_attr,其接纳下列参数:

  • $value:正在加载的属性值,能够是“ lazy”(默许),“ eager”或false。假如要禁用图像的延迟加载,激烈倡议设置为false,以便完整省略该属性。
  • $image:整个图片HTML标签及其属性。
  • $context:上下文,与上述其他过滤器相似。

例如,假如您要在文章内容中禁用ID为42且大小为“ large”的特定附件图像的延迟加载,则能够运用以下代码段:

function skip_loading_lazy_image_42_large( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
        $image_url = wp_get_attachment_image_url( 42, 'large' );
        if ( false !== strpos( $image, ' src="' . $image_url . '"' ) {
            return false;
        }
    }
    return $value;
}
add_filter(
    'wp_img_tag_add_loading_attr',
    'skip_loading_lazy_image_42_large',
    10,
    3
);

关于经过wp_get_attachment_image()输出的图像,能够简单地经过函数的$attr参数来控制属性,该参数能够是与$value上述滤镜的参数相同的可能值。为了不延迟加载图像,应指定loading属性值为false,这将招致该属性被疏忽。例如:

echo wp_get_attachment_image(
    42,
    'large',
    false,
    array( 'loading' => false ),
);

倡议主题开发人员对wp_get_attachment_image()或基于图像的其他函数(例如the_post_thumbnail()或 get_custom_logo())上的图像停止细化处置它们的loading属性,详细取决于它们在模板中的运用位置。例如,假如图像放置在header.php模板中并且很可能在初始视口中,则倡议跳过该loading图像的属性。

标志为延迟加载候选图像的图像请求阅读器解析图像在页面上的位置,这依赖于IntersectionObserver可用,因而从今天开端略微延迟了它们的提取。运用Android版Chrome阅读器停止的实验标明,此类loading="lazy"图像在初始视口中对“ 最大内容绘画”指标的影响很小,与非延迟加载的图像相比,第75个百分位数和第99个百分位数的回归幅度不到 1%,但这是使主题开发人员能够应用一些微调以取得更好的用户体验的思索要素。

阅读器兼容性

loading属性遭到现代阅读器的普遍支持,并且呈上升趋向:例如,固然Safari支持在发布之时髦不可用,但该功用也正在开端运用,并且曾经兼并到根底WebKit引擎中。

但是,即便当前不支持该loading属性的阅读器也不会看到WordPress在图像上提供该属性的任何负面影响,由于本机延迟加载机制是作为完整渐进加强完成的:关于这些阅读器,该属性将被疏忽。这也意味着每当阅读器完成对该功用的支持时,其用户在阅读由WordPress驱动的站点时都将立刻取得益处。

本站所有发布资源均支持繁体中文,但因繁体中文用户量太少,大部分资源你需要申请汉化才能提供。从2021年1月1日开始,本站所有资源必须注册登陆后才能下载,全部免费。10家园币=1元人民币。如果你不想花钱,可以通过每天登陆、签到或邀请注册等方式免费获得家园币。
weinxin
官方微信公众号
扫一扫关注微信公众号,如果你觉得本站帮到了你,请通过下面的赏字按钮捐赠本站,谢谢!