Question

因此，我正在尝试寻找一种自动延迟加载客户端Wordpress网站上博客文章中所有图像的方法。

作为开发人员，我宁愿不使用WP插件（例如BJ Lazy Load或A3 Lazy Load），而宁愿使用JS插件（JQuery Lazy by eisbhr）来赋予我更多控制权。

到目前为止，我发现的所有SO解决方案都没有起作用。

尝试＃1

我使用了the_content钩子将src更改为data-src。我使用的代码是基本代码。

function add_data_src_to_content($content) {
    return str_replace("src=", "data-src=", $content);
};

add_filter('the_content', 'add_data_src_to_content');

尽管确实将src更改为data-src，但浏览器仍然将图像加载到折叠以下（这违背了延迟加载的目的）。我猜想the_content钩子实际上还使用了另一个钩子来加载图像。这是我第二次尝试的方式。

尝试＃2

第二次尝试使用image_send_to_editor钩子。代码：

function add_data_src($html, $id, $caption, $title, $align, $url) {
    return str_replace("<img src", '<img data-src', $html);
};

add_filter('image_send_to_editor', 'add_data_src', 10, 9);

这不适用于已发布的帖子。因此，我必须重新插入图像才能使此代码片段正常工作。我也成功地将src转换为data-src！问题：再次，WP仍会加载图像（在“开发工具”中检查“网络”选项卡时），无法达到延迟加载的目的。

在这一点上，我很困惑。如何防止WP在不使用插件的情况下将图片加载到首屏之下？

Answer 1

我假设您是指通过帖子/页面编辑器输入的内容中的图像，而不是侧边栏小部件或首页中的图像（显然，这些图像仍会加载）。

我将您的Attempt＃1添加到了我的自定义网站插件中，并且通过帖子编辑器添加的图像被加载，无法显示。但是；通过其他方式插入的图像继续加载并显示简码除非，否则我将过滤器功能设置为“低优先级”。

尝试在“其他所有内容”之后运行您的Attempt＃1筛选器功能。 add_filter('the_content', 'add_data_src_to_content', 9999);
删除延迟加载的Javascript，然后清除缓存并浏览页面之一并查看（HTML）源。如果您的过滤器正常工作或部分正常工作，您将在HTML中看到“ data-src =“属性，而不是“ src =”；如果是这样，则问题可能与您的Java脚本设置和“早期”非延迟加载有关。

Answer 2

我发现了什么地方出了问题：显然，Wordpress会自动为所有插入的图像添加一个srcset和sizes属性（显然，自WP 4.4开始就已经存在）。我尝试使用image_send_to_editor钩子时发现了这个问题。我正在使用的JS插件要求我将srcset设置为data-srcset，将sizes设置为data-sizes，以使延迟加载工作。将那些应用于the_content钩子上的更改实际上是可行的。最终代码（有效）是：

function add_data_src_to_content($content) {
    $content = str_replace("<img src=", "<img data-src=", $content);
    $content = str_replace("srcset=", "data-srcset=", $content);
    $content = str_replace("sizes=", "data-sizes=", $content);

    return $content;
};

add_filter('the_content', 'add_data_src_to_content');

Answer 3

在创建新帖子或页面时，它将自动为所有'img loading =“ lazy”'和'iframe loading =“ lazy” iframe'标签添加'loading =“ lazy”'属性。

它是通过以下方式实现的：

add_filter( 'save_post', 'add_lazy_load', 10, 3 ); 
function add_lazy_load($post_id, $post, $update) 
{
if (wp_is_post_revision($post_id)) 
{ 
return; 
} 
if ( ! class_exists( 'DOMDocument', false ) ) 
return; 
remove_action('save_post', 'add_lazy_load'); 
$post_status = get_post_status();

了解更多：https://www.plerdy.com/blog/lazy-loading-setup-wordpress/

Answer 4

我认为延迟加载最可行的解决方案是原生延迟加载。在这种情况下，您只需为 img 标签添加一个加载属性。然后，浏览器将负责延迟加载。

以下是加载属性支持的值：

auto：浏览器默认的延迟加载行为，与不包含属性相同
懒惰：推迟加载资源，直到它到达与视口的计算距离。
eager：立即加载资源，无论它位于页面上的哪个位置。

Chrome、Edge、Opera 和 Firefox 都支持它。

https://web.dev/browser-level-image-lazy-loading/

延迟加载Wordpress发布

4 个答案: