思路：

当用户访问页面，浏览器向服务器发出请求，服务器拼接页面内容阶段，将图片的src和srcset的值先转给给其他自定义的属性。

待页面在客户端打开后，再通过js给特定区域内图片的src和srcset恢复原始值。
随着页面的滚动为即将进入屏幕范围内的图片陆续恢复其src和srcset的值。已达到按需加载，提高网页加载速度的目的。

第一步：服务器端内容过滤

将以下代码引入到主题文件的functions.php中。

function onepxeye_lazyload_filter($content)
{
    $content = preg_replace('/(<img.+)(src)/Ui', '$1data-lazyload-$2', $content);
    $content = preg_replace('/(<img.+)(srcset)/Ui', '$1data-lazyload-$2', $content);
    $content = str_replace('<img', '<img data-lazy="loading" src="data:image/gif;base64,R0lGODlhAQABAIAAAPPz8wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="', $content);
    return $content;
}

function onepxeye_lazyload_attachments_filter($atts, $attachment)
{
    if (isset($atts['srcset'])) {
        unset($atts['srcset']);
    }
    return $atts;
}

add_filter('wp_lazy_loading_enabled', '__return_false');
add_filter('the_content', 'onepxeye_lazyload_filter', 100, 2);
add_filter('widget_text', 'onepxeye_lazyload_filter');
add_filter('wp_get_attachment_image_attributes', 'onepxeye_lazyload_attachments_filter', 10, 2);

function onepxeye_lazyload()
{
    wp_enqueue_script('lazyload', get_template_directory_uri() . '/inc/lazyload/js/lazyload.js', array('jquery'), null, true);
//使用时注意路径的修改。array('jquery')为需要wp中jquery的支持。
}
add_action('wp_enqueue_scripts', 'onepxeye_lazyload', 10);

第二步：添加js以操作图片

(function ($) {
    $.fn.lazyLoadImgInTheViewport = function () {
        var deviation = 300;
        if (deviation < 0 && (-deviation > (document.documentElement.clientHeight / 2))) {
            deviation = document.documentElement.clientHeight / 2;
        }
        var elementHeight = $(this)[0].offsetHeight;
        var bounding = $(this)[0].getBoundingClientRect();
        return bounding.top + deviation >= -elementHeight && bounding.bottom - deviation <= (window.innerHeight || document.documentElement.clientHeight) + elementHeight;
    }

    function lazyLoadAssets() {
        $('[data-lazy="loading"]').each(function () {
            var $this = $(this);
            if ($(this).lazyLoadImgInTheViewport()) {
                var $src = $this.data("lazyload-src");
                var $srcset = $this.data("lazyload-srcset");
                $this.attr("src", $src);
                $this.attr("srcset", $srcset);
                $this.attr("data-lazy", "loaded");
            }
        });
    }

    $(function () {
        lazyLoadAssets();
    });

    $(window).on("scroll", function () {
        lazyLoadAssets();
    });

})(jQuery);

代码参考来源：

《如何让网站访问更快一些》- 图片延迟加载(jQuery)