README

描述

渐进式迁移到原生懒加载。

插件的想法是在浏览器支持原生懒加载时使用原生懒加载，对于所有其他情况则通过lazysizes库实现懒加载，该库仅在需要时加载。

插件为所有附件、通过编辑器插入到内容中的oEmbed iframe、图像和iframe添加了loading属性，同时为这些元素添加了CSS类lazyload以及从对应属性创建的data-src、data-srcset和data-sizes。

安装

将此存储库克隆到 wp-content/plugins/

cd wp-content/plugins/
git clone git@github.com:innocode-digital/wp-hybrid-lazy-loading.git

或者使用 Composer。

从插件页面激活 Hybrid Lazy Loading 或使用 WP-CLI：wp plugin activate wp-hybrid-lazy-loading。

文档

默认情况下，插件懒加载lazysizes，这意味着只有在不支持原生懒加载的浏览器中才加载，但可以通过过滤器更改此行为。

add_filter( 'innocode_wp_hybrid_lazy_loading_lazy_enqueue_lazysizes', '__return_false' ); // Default is "true"

例如，当lazysizes也用于其他功能时，这很有意义。

默认情况下，CSS类"lazyload"在支持原生懒加载的浏览器中从元素中删除，但可以通过过滤器更改此行为。

add_filter( 'innocode_wp_hybrid_lazy_loading_force_use_lazysizes', '__return_true' ); // Default is "false"

例如，当需要在所有浏览器中添加在加载过程中添加到元素的lazysizes CSS类时，这很有意义。

默认情况下，所有附件都是懒加载的，但可以通过过滤器更改此行为。

add_filter( 'innocode_wp_hybrid_lazy_loading_attachment_loading', function ( $type, $attachment_id ) {
    $type = 'eager'; // Default is "lazy"
    
    return $type;
}, 10, 2 );

例如，当特色图像应该立即加载时，这很有意义。

如果有图像和iframe在主题或插件的PHP代码中渲染，并且它们应该懒加载，则可以使用以下方法：

/**
 * Adds "loading" attribute and "lazyload" CSS class to images in HTML code
 *
 * @param string $html
 * @return string
 */
\Innocode\WPHybridLazyLoading\DOM::images( $html );

/**
 * Adds "loading" attribute and "lazyload" CSS class to iframes in HTML code
 *
 * @param string $html
 * @return string
 */
\Innocode\WPHybridLazyLoading\DOM::iframes( $html );

/**
 * Adds "loading" attribute and "lazyload" CSS class to elements in HTML code by tag
 *
 * @param string $tag
 * @param string $html
 * @return string
 */
\Innocode\WPHybridLazyLoading\DOM::elements( $tag, $html );