README

WordPress最佳免费懒加载插件。懒加载图片、视频和iframe以提升性能和核心Web Vitals评分。在wordpress.org上下载插件下载插件。

描述

LazyLoad是WordPress上最佳的免费懒加载插件，用于懒加载图片、视频和iframe。简单来说，LazyLoad仅在图片、视频和iframe对用户可见时才显示它们 - 这是加快WordPress网站速度和优化Google PageSpeed图片的关键方式。

您可以在文章内容或小部件文本中懒加载图片，包括缩略图、头像和表情符号。LazyLoad还负责iframe的懒加载：您可以用预览缩略图轻松替换YouTube iframe，进一步加快您网站加载时间。

不使用任何JavaScript库，如jQuery，脚本大小小于10KB。

为什么懒加载对性能至关重要？

懒加载是提高网站速度的关键性能技术。您将减少加载时间，提高Lighthouse性能评分，并优化核心Web Vitals评分。

在WordPress上懒加载图片将帮助您从以下三个主要原因提高PageSpeed Insights评分：

您将解决PageSpeed Insights的具体建议：[延迟离屏图片](https://wp-rocket.me/google-core-web-vitals-wordpress/defer-offscreen-images/，这意味着图片懒加载。
您将提高两个关键指标的性能：[首次输入延迟](First Input Delay，核心Web Vital）和[总阻塞时间](Total Blocking Time，Lighthouse指标）。
您将减少HTTP请求次数 - 这是提高网站速度和改善[最大内容渲染时间](Largest Contentful Paint score，另一个核心Web Vital）的另一种方式。

查看我们完整的理由列表为什么您应该使用懒加载。然后，开启LazyLoad，让您的WordPress网站速度更快！

如何构建插件

为了构建插件，您需要安装composer。

一旦安装，您可以按照以下步骤操作

从插件下载zip文件并解压到一个文件夹中。
进入该文件夹，并运行命令 composer i 来安装完整插件，并让脚本安装受保护的依赖项。
运行命令 composer i --no-dev --no-scripts -o 从依赖中安装生产版本。
将文件夹压缩回，你就有了插件的工作版本。

依赖项

LazyLoad 脚本： https://github.com/verlok/lazyload

== 安装 ==

将完整的 rocket-lazy-load 文件夹上传到 /wp-content/plugins/ 目录
通过 WordPress 中的“插件”菜单激活插件

常见问题

如何使用原生的 lazyload？

要在支持此功能的浏览器上使用原生的 lazyload，你需要使用以下行

add_filter( 'rocket_use_native_lazyload', '__return_true' );

不支持原生 lazyload 的浏览器将使用之前基于 JS 的解决方案。

如何在某些页面上禁用 Lazy Load？

你可以使用 do_rocket_lazyload 过滤器。

以下是一个示例，将放入 functions.php 文件中以禁用文章中的 lazyload

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' ); function deactivate_rocket_lazyload_on_single() { if ( is_single() ) { add_filter( 'do_rocket_lazyload', '__return_false' ); } }

如何在某些图像上禁用 Lazy Load？

只需在 img 或 iframe 标签中添加一个 data-no-lazy="1" 属性。

你也可以使用过滤器 rocket_lazyload_excluded_attributes 或 rocket_lazyload_excluded_src 来排除特定模式。

对于 iframes，过滤器是 rocket_lazyload_iframe_excluded_patterns。

如何更改触发加载的阈值？

你可以使用 rocket_lazyload_threshold 过滤器。

代码示例

function rocket_lazyload_custom_threshold( $threshold ) { return 100; } add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

我使用插件 X，我的图像不再显示

一些插件在没有懒加载的情况下不兼容。请打开支持线程，我们将看看如何通过为此插件排除懒加载来解决此问题。

如何懒加载背景图像？

插件将自动将具有 style 属性设置的背景图像懒加载到 div 元素

<div style="background-image: url(image.jpg);">

你也可以手动应用它。你想要应用懒加载的元素必须具有以下特定的标记

<div class="rocket-lazyload" data-bg="url(../img/image.jpg)"></div>

该元素必须具有类 rocket-lazyload，以及一个 data-bg 属性，其值是图像的 CSS url。

在哪里报告在此插件中发现的漏洞？

你可以通过 Patchstack Vulnerability Disclosure Program 报告在 site-reviews 插件的源代码中发现的任何安全漏洞。Patchstack 团队将协助你进行验证、CVE 分配，并负责通知此插件的开发者。

变更日志

= 2.3.9 = 更新版本，修复了Github上发布标签与发布版本不匹配的问题，这导致部署出现问题。

= 2.3.8 = 增强：增加与Launchpad的兼容性（见https://github.com/wp-launchpad）增强：提高与PHP > 7.3的兼容性错误：从供应商中移除wp-media/rocket-lazyload-common增强：将wp-media/rocket-lazyload-common提升到3.0

= 2.3.7 = 修复错误：由于polyfill的漏洞，移除了rocket_lazyload_polyfill过滤器

= 2.3.5 = 增强：测试与WordPress v5.9.3最新版本的插件增强：更改WP的readme内容。

= 2.3.4 = 增强：允许<a>标签懒加载背景图片增强：添加标签到懒加载图片元素错误修复：防止与WooCommerce 4.4冲突导致的致命错误更新：支持新版本的lazyload脚本的背景图片懒加载错误修复：正确应用rocket-lazyload类到具有背景图片和空类值的元素上错误修复：正确应用rocket-lazyload类到HTML格式不正确的元素上错误修复：防止使用不同类型的引号围绕URL时的显示问题错误修复：当 alt属性包含任何html编码字符时，防止布局破坏

= 2.3.3 = 增强：将data-skip-lazy和skip-lazy类添加到排除列表中，作为懒加载插件之间互操作性的组成部分增强：只有当过滤器rocket_use_native_lazyload为true时才使用原生懒加载增强：在figure元素上设置背景图片时应用懒加载错误修复：当类属性为空且元素具有背景图片时正确添加rocket-lazyload类错误修复：当使用相对协议时，正确替换YouTube iframe为预览图片错误修复：在LazyLoad期间保留youtube-nocookie.com

= 2.3.2 = 修复错误：在YouTube缩略图HTML代码中使用了错误的字符

= 2.3.1 = 修复错误：防止与WP Rocket冲突在YouTube缩略图上应用loading="lazy"添加autoplay属性到加载YouTube缩略图的iframe

= 2.3 = 增强：添加对浏览器原生懒加载的支持错误修复：防止在某些情况下破坏图片元素的图片错误修复：防止图片元素中的srcset和sizes的lazy属性错误

= 2.2.3 =

增强：提高图片元素的兼容性
增强：在section、span和li元素上设置的背景图片应用懒加载
增强：也将$width和$height值传递给rocket_lazyload_placeholder过滤器
修复错误：将默认占位符尺寸从1改为0以提高兼容性
修复错误：改善无限滚动支持
修复错误：排除Enfold avia-background-fixed背景图片和数据-large_image以防止懒加载

= 2.2.2 =

修复错误：自动排除data-height-percentage属性以防止显示问题
修复错误：正确处理fitVids再次使用的响应式视频

= 2.2.1 =

增强：添加一种方法来自定义懒加载脚本选项
修复错误：防止在Internet Explorer 11上出现错误
修复错误：防止与WooCommerce变体方块冲突
修复错误：防止当图片是内联base64时出现空的src
修复错误：防止当原始src属性使用单引号时出现问题时

= 2.2 =

增强：更新lazyload脚本到最新版本
增强：在可能的情况下，使用原始图片的尺寸作为占位符大小，以减少内容重排
增强：忽略使用Chrome新引入的loading属性进行浏览器原生懒加载的图片

= 2.1.5 =

修复错误：防止当data-style属性在div上为背景图片时匹配错误的数据
默认移除data-cfasync="false"
增强：添加rocket_lazyload_script_tag过滤器以修改所需的懒加载脚本HTML
增强：将data-no-minify属性添加到懒加载脚本标签，以防止它被JS组合器合并
增强：改进MutationObserver代码，仅在DOM中添加的新节点包含图像/iframe或具有.rocket-lazyload类的元素时调用lazyload更新方法

= 2.1.4 =

回归修复：正确排除脚本再次进行lazyload

= 2.1.3 =

错误修复：忽略noscript标签内的内容，以防止修改它们并引起一些显示问题

= 2.1.2 =

增强：更新lazyload脚本到最新版本
增强：添加一种方法来lazyload YouTube缩略图图像
增强：根据分辨率添加宽度属性和高度属性到YouTube缩略图图像
增强：默认禁用intersectionObserver的polyfill，添加了一种激活它的方法
增强：将data-cfasync="false"添加到lazyload脚本标签中
增强：防止在Oxygen Builder页面编辑器上lazyload
错误修复：将no JS CSS包装在noscript标签中，并删除no-js标识符

= 2.1.1 =

错误修复：正确应用lazyload到picture元素上
错误修复：当picture元素内的img元素仅具有srcset属性而没有src属性时，防止图像重复加载

= 2.1 =

增强：更新lazyload脚本到最新版本
增强：在页面上找到的picture元素上应用lazyload
增强：在页面上找到具有背景图像的div元素上应用lazyload。更多信息请参见FAQ。

= 2.0.4 =

增强：添加iframe lazyload模式排除过滤器
增强：自动排除soliloquy-image模式从lazyload
错误修复：防止同一页面上重复图像/iframe时出现的问题
错误修复：防止SVG占位符的W3C验证错误

= 2.0.3.2 =

错误修复：正确忽略带有内部换行符的行内脚本

= 2.0.3.1 =

错误修复：解决防止lazyload工作的一个问题

= 2.0.3 =

错误修复：防止禁用JavaScript时显示不正确
错误修复：不要在Divi/Extra/Beaver Builder编辑器页面上应用lazyload
错误修复：当同一页面上有多个iframe时，使用每个iframe的正确URL
错误修复：忽略行内脚本标签内的内容，以防止在其中应用lazyload

= 2.0.2 =

错误修复：修复AMP插件兼容性的错误

= 2.0.1 =

错误修复：防止在区分大小写的操作系统上出现致命错误

= 2.0 =

增强：现在在template_redirect钩子上应用lazyload，这应该允许插件在更多图像上应用优化，同时遇到更少的冲突
增强：专门针对具有data-lazy-src属性的图像/iframe元素使用lazyload脚本
增强：更新lazyload脚本到最新版本
增强：通过特定标记应用lazyload到背景图像上。更多信息请参见FAQ
增强：使用SVG图像作为占位符而不是base64 gif
错误修复：如果浏览器中可用，则仅使用MutationObserver
错误修复：当使用YouTube缩略图选项时，如果视频URL已编码，则正确格式化YouTube查询
错误修复：改进iframe匹配以防止意外结果
错误修复：更新YouTube缩略图选项的CSS以防止与Gutenberg嵌入块的冲突

= 1.4.9 =

增强：将lazyload脚本更新到最新可用版本
增强：使用lazy-sizes以防止在定义了sizes但srcset未定义时出现W3C验证错误
增强：仅在选项中选择了要lazyload的元素时解析图像或iframe
修复：防止Google Search Console中lazyload+v的警告
修复：防止WooCommerce产品图像的PHP Notice

= 1.4.8 =

注意：现在需要的最小WordPress版本是4.7
增强：更新lazyload脚本版本
增强：删除占位符图像以提高感知加载时间
增强：与YouTube隐私URL兼容
增强：更新播放图像以匹配YouTube标志
增强：支持YouTube URL参数
增强：使用wp_get_attachment_image()显示的图像应用lazyload。/!\ 如果禁用JavaScript，则没有回退
修复：使用srcset中设置的正确大小为懒加载图像
修复：防止在播放列表上替换YouTube缩略图
修复：防止在AMP页面上进行iframe lazyload
修复：修正翻译文本域（感谢 @ Chantal Coolsma）

= 1.4.7 =

修复与无限滚动的兼容性
防止masterSlider图像上的懒加载

= 1.4.6 =

正确包含lazyload脚本的8.5.2版本
防止URL包含"-v"时lazyload脚本出现404错误

= 1.4.5 =

在WP菜单中重命名设置页面名称
设置页面中的新产品横幅
根据浏览器对IntersectionObserver的支持情况，有条件地加载脚本的不同版本
修复一个错误，即当初始隐藏的图像进入视图时（滑块、标签页、手风琴），它们不会正确显示

= 1.4.4 =

管理员界面重设计

= 1.4.3 =

插件再次与PHP < 5.4兼容

= 1.4.2 =

更新lazyload脚本以恢复与IE9/10的兼容性

= 1.4.1 =

修复由过于激进的清理引起的错误

= 1.4 =

新选项：用缩略图替换YouTube视频。此选项可以大大提高您的加载时间，尤其是如果您在同一个页面上有多个视频

= 1.3.3 =

2017-09-16
防止在HTML解析期间移除脚本和样式

= 1.3.2 =

2017-09-12
修复在某些条件下图像无法显示的错误，因为图像属性排除没有正确工作

= 1.3.1 =

2017-09-07
不要在Divi滑块上应用懒加载

= 1.3 =

2017-09-01
改进图像和iframe的HTML解析，使其更快、更高效
使lazyload与fitVids for iframe兼容
不要在AMP页面上应用懒加载（与Automattic的AMP插件兼容）
使用about:blank作为默认iframe占位符，以防止浏览器控制台中的警告
不要在upPrev缩略图上应用懒加载

= 1.2.1 =

2017-08-22
修复缺失的lazyload脚本
对于REST API请求中的图像不应用懒加载

= 1.2 =

2017-08-22
将lazyload脚本更新到最新版本
更改脚本加载的方式

= 1.1.1 =

2017-02-13
错误修复：移除短标签的使用，以防止某些安装出现500错误

= 1.1 =

2017-02-12
新功能
JS库更新
支持iFrame
支持srcset和sizes
新选项页

= 1.0.4 =

2015-04-28
错误修复：解决了LazyLoad与WordPress 4.2中Emoji的冲突

= 1.0.3 =

2015-01-08
错误修复：不要在Really Simple CAPTCHA的验证码上应用LazyLoad以防止冲突。

= 1.0.2 =

2014-12-28
改进：添加「 rocket_lazyload_html 」过滤器来管理将要打印的输出。

= 1.0.1.1 =

2014-07-25
修复1.0.1中的新正则表达式错误

= 1.0.1 =

2014-07-16
错误修复：当IMG标签或内容（小工具或帖子）包含字符串"数据-no-lazy"时，所有IMG标签都被忽略，而不是一个。
安全修复：preg_replace()可能导致XSS漏洞，感谢Alexander Concha
代码合规性

= 1.0 =

2014-01-01
初始发布。

wp-media / rocket-lazy-load

维护者

详细信息