在WordPress 5.5中,默认情况下图像将延迟加载,使用本机HTML加载
属性哪一个2020年初成为网络标准这将大大节省服务器和用户代理的带宽,因为在这些站点上,图像通常会在页面下方立即加载,即使用户可能永远不会向它们滚动。
默认情况下,WordPress将添加加载=“惰性”
致所有人国际货币基金组织
具有宽度
和高度
属性存在。从技术上讲,这是在页面输出中处理的,类似于WordPress中通过添加src设置
和尺寸
属性。为了提高这两个功能的服务器端性能wp_filter_content_tags()
引入了函数,以便国际货币基金组织
标签只需要解析一次,然后将修改推迟到与功能相关的更具体的函数。
请参见#44427对于整体而言Trac公司 Edgewall Software的一个开源项目,用作WordPress的错误跟踪和项目管理工具。 票 为bug报告和bug跟踪器上的功能开发创建。.
减少布局变化是前提
现代网站中一个常见的用户体验问题是布局移动,通常是由图像等媒体资源加载缓慢引起的:默认情况下,只有在加载图像后,浏览器才能正确布局页面,从而导致图像下方的内容发生偏移。这个问题可以是通过提供宽度
和高度
上的属性国际货币基金组织
标签,因为浏览器将使用它们来确定图像的纵横比,以便推断页面布局向前地实际加载图像。
虽然这在没有延迟加载图像的情况下已经是一个主要问题,但随着延迟加载的出现,它变得更加重要。因此WordPress只会添加loading=“懒惰”
到国际货币基金组织
具有两个维度属性的标记。同时,解决潜在问题对于减少总体布局变化同样重要,这就是为什么WordPress 5.5版将开始反填充宽度
和高度
上的属性国际货币基金组织
标签,如果它们还不存在。为此,它重用已建立的逻辑来确定src设置
和尺寸
属性。与那些属性一样,宽度
和高度
只能确定图像是否用于WordPress附件,以及国际货币基金组织
标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)包括相关的wp-image-$id
类。
WordPress主要遵循这一最佳实践,并且正在进行工作以确保编辑器中的所有图像都具有宽度
和高度
。只要主题的CSS公司 级联样式表。与经典编辑器内容配合使用。,应该是:如果图像宽度
或高度
通过CSS修改,相应的其他属性应设置为汽车
,以避免图像被拉伸。
请参见#50367有关此更改的更多背景信息。
自定义延迟加载
默认情况下,WordPress会添加加载=“惰性”
属性设置为以下图像:
- 帖子内容中的图像(
_内容
) - 文章摘录中的图像(
Exchange(_E)
) - 文本小部件中的图像(
小部件文本内容
) - 化身 化身是一种图像或插图,专门指代表在线用户的角色。它通常是出现在用户名旁边的方框。图像(
获取增值税
) - 模板图像使用
wp_get_attachment_image()
(wp_get_attachment_image(获取附件图像)
)
开发人员可以通过各种过滤器自定义此行为,最基本的是wp_lazy_loading_enabled(已启用wp_lazy_loading_enabled)
,它接收以下参数:
$违约
:的布尔默认值真的
到滤波器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们与Actions相对应。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。.$标记名
:一个HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。标记名称。而根据当前WordPress的行为,这将永远是国际货币基金组织
,应该注意的是这个加载
属性是通用属性并且可以在将来扩展以支持更多元素,例如iframe。$上下文
:作为附加参数的上下文字符串,指示图像的技术来源,通常是WordPress挂钩名称。基于WordPress本身如何使用惰性加载,上下文可以是上面列表中括号中的五个值之一.
例如,如果您希望默认情况下关闭模板图像的延迟加载,可以使用以下代码段:
函数disable_template_image_lazy_loading($default、$tag_name、$context){if('img'===$tag_name&&'wp_get_attachment_image'===$context){返回false;}return$default;}添加筛选器(“wp_lazy_loading_enabled”,'禁用模板图像加载',10,三);
为了修改特定图像的加载属性,根据图像的类型,有两种不同的方法:
对于出现在内容blob中的图像(例如。_内容
,Exchange(_E)
,小工具_文本_内容
),另一个新过滤器wp_img_tag_add_loading_attr
可以使用,它接收以下参数:
价值$
:加载属性值,可以是“lazy”(默认)、“eager”或假
。如果要禁用图像的延迟加载,强烈建议指定假
这样属性就完全被省略了。$图像
:整个图像HTML标记及其属性。$上下文
:上下文,与上面另一个筛选器的描述类似。
例如,如果要在帖子内容中禁用ID为42、大小为“大”的特定附件图像的延迟加载,可以使用以下代码段:
函数skip_loading_lazy_image_42_large($value、$image、$context){if('thecontent'===$context){$image_url=wp_get_attachment_image_url(42,“大”);if(false!==strpos($image,'src=“'.$image_url.'”'){返回false;}}返回$value;}添加筛选器('wp_img_tag_add_loading_attr',“skip_loading_lazy_image_42_large”,10,三);
对于通过输出的图像wp_get_attachment_image()
,可以通过函数的$属性
参数,可以是与价值$
上述过滤器的参数。为了不延迟加载图像,属性值为假
应该指定,这将导致省略属性。例如:
回显wp_get_attachment_image(42,“大”,错误,数组(“加载”=>false),);
建议主题开发人员细粒度地处理加载
图像所依赖的任何时间的属性wp_get_attachment_image()
或基于它的其他函数(例如post_thumbnail()
或获取自定义日志()
),取决于它们在模板中的使用位置。例如,如果图像放置在页眉
模板,并且很可能位于初始视口中,建议跳过加载
属性。
标记为等待延迟加载的图像需要浏览器解析图像在页面上的位置,它依赖于交叉口观察员可用因此,到今天为止,他们的抓取稍有延迟。在Android上使用Chrome的实验表明加载=“惰性”
上的初始视口中的图像含量最高的油漆度量值相当小回归,回归 破坏或降级以前工作过的东西的软件错误。回归通常被视为关键错误或拦截器最近的回归可能会得到更高的优先级。“3.6回归”是3.6中的一个缺陷,它在3.5中起到了预期的作用。与未加载的图像相比,在第75和99百分位上小于1%,但主题开发人员可以应用一些微调以获得更好的用户体验,这是一个考虑因素。
请参见#50425有关此更改的更多背景信息。
浏览器兼容性
这个加载
现代浏览器广泛支持属性,有增加的趋势:例如,虽然在发布时Safari支持还不可用,该功能也正在开发中,并且已经被合并到基础WebKit引擎中.
然而,即使是目前不支持加载
属性不会因WordPress在图像上提供属性而产生任何负面影响,因为本机的延迟加载机制是作为一个完整的进步的增强 增强是对WordPress的简单改进,例如添加挂钩、新功能或对现有功能的改进。:对于这些浏览器,该属性将被忽略。这也意味着,无论何时浏览器实现对该功能的支持,其用户在浏览WordPress支持的网站时都会立即获得好处。
道具@阿佐兹感谢你帮我写这篇文章。
#5-5,#开发说明,#特征-酶负荷