阅读时间4分钟 (727字)

在您的网站上使用原生的懒加载

January-Lazyloading

通过这篇文章,我想继续探讨这个话题,包括核心中懒加载的当前状态,以及如何在3.x版本中今天就开始使用它。

 

Joomla 4.0核心中懒加载的历史

在我们最初被谷歌联系后,我们与他们合作,提出了一个针对Joomla 4.0核心的初始拉取请求。基本想法是“让我们将其作为一个插件,这样每个人都可以选择禁用它,我们也支持现有的内容,而无需任何人采取行动”。在这个PR中,我们对这个PR的各个方面以及如何最好地将懒加载集成到核心中进行了长时间的讨论。最终,这个PR被合并,但后来由于Dimitris Grammatikogiannis 贡献了一个更新的版本,具有更好的缓存和直接在新的媒体管理器上实现,所以它从核心中被撤回。

Joomla 4.0中懒加载的当前状态

那么,目前的状况是什么?好吧,截至本文撰写时,提到的Dimitris的PR还需要进行一次测试和最终的合并,这些可能在本文章发布时已经发生了变化。

让我们现在看看开发分支。有两种方法可以将图片插入到Joomla文章中。一种是媒体管理器图像选择器字段,另一种是将图像“拖放”到TinyMCE字段中。两者现在都有添加替代文本的字段(对于可访问性和屏幕阅读器非常有用),以及用于懒加载图像的复选框。

这就是它在媒体管理器图像选择器中的样子

这就是您使用TinyMCE的“拖放”功能时的样子

使用这两种视图,您可以选择是否延迟加载图片(默认选中)以及现在还可以为图片标签添加alt属性。

与最初提出的实现相比,这具有很大的优势,因为它不需要在页面加载时运行任何代码,因为所有内容都在HTML中准备就绪,这也不是“全开或全关”的解决方案,而是一个您可以自行决定任何图片的解决方案。

从Joomla 4.0开始如何使用原生延迟加载

那么,如何在Joomla 4中现在使用这个功能。正如您在截图中所看到的,使用Joomla 4,我们将默认延迟加载您插入的所有图片,您可以选择退出该选项或在编辑器中稍后更改生成的HTML。因此,在这个问题上您不再需要做任何事情,因为Joomla会处理这个问题。

如何在Joomla 3.x上现在使用原生延迟加载

但是,您仍然可以在3.x上使用原生延迟加载。在这篇文章中,我想提到Dimitris的解决方案,包括一个组件来转换现有内容,以及我为3.x编写的插件,作为最初我正在工作的解决方案的后向兼容。

使用com_addlazyloading将延迟加载属性添加到现有文章

在这里选择的解决方案的基本概念是一个组件,它会在您的所有文章中运行一次,并为现有文章中的图片添加loading=lazy设置以启用原生延迟加载。更多详细信息可以在Dimitris的网站 (GitHub)上找到。

内容 - ImageLazyLoading

我在当时工作的第一个PR中提到的初始插件方法仍然存在,并已作为插件向后移植到3.9+。我将其命名为“ImageLazyLoading by zero24”发布到JED以及GitHub,供每个人免费使用。

基本设置是安装并启用后端中的“内容 - ImageLazyloading”插件,然后您就完成了。现在,该插件在触发内容事件的任何网站上运行,并确保所有图片标签都会获得加载属性,默认为loading=lazy。

结语

我必须承认,我的最初提议并不是最优雅的核心解决方案,而现在我们拥有的核心解决方案要好得多。所有这个功能的功劳都应该归功于Dimitris Grammatikogiannis,他不断推动我们摆脱插件方法,进入这个伟大的媒体管理器集成。谢谢!

一些发表在Joomla社区杂志上的文章代表了作者对特定主题的个人观点或经验,可能与Joomla项目的官方立场不一致

3
一月号
Joomla 4: Cassiopeia模板
 

评论

已经注册? 这里登录
还没有评论。成为第一个发表评论的人

通过接受,您将访问 https://magazine.joomla.net.cn/ 外部第三方提供的服务