function enqueue_lazyload() {
wp_enqueue_script(\'jquery_lazy_load\', get_stylesheet_directory_uri() . \'/js/jquery.lazyload.min.js\', array(\'jquery\'), \'1.9.1\');
}
add_action(\'wp_enqueue_scripts\', \'enqueue_lazyload\');
接下来,我们必须在页脚中添加一小段Javascript,以使延迟加载插件能够识别图像。您可以在插件的主页上看到这是如何工作的,但基本上我们必须为插件指定一个类作为目标。当用户滚动到该类时,它将使用该类中的任何图像来交换占位符图像和实际图像。我们将使用wp\\u footer操作自动将其附加到每个页面的页脚。
function footer_lazyload() {
echo \'<script type="text/javascript">
(function($){
$("img.lazy").lazyload();
})(jQuery);
</script>\';
}
add_action(\'wp_footer\', \'footer_lazyload\');
有了这段代码,延迟加载插件将真正开始工作。但我们的图片仍由WordPress加载。诀窍是过滤我们所有的帖子,并用占位符图像替换掉一个图像。然后,根据插件的说明,我们在img标记上使用“data original”属性来表示图像的实际URL。最后,我们向每个图像添加一个“lazy”类,以便jQuery知道如何查找它。延迟加载插件将等待这些图像进入用户视图,然后使用AJAX将它们拉入并加载到页面上。我们的第一步是使用preg\\u replace\\u回调添加一个简单的过滤器来搜索img标记。
function filter_lazyload($content) {
return preg_replace_callback(\'/(<\\s*img[^>]+)(src\\s*=\\s*"[^"]+")([^>]+>)/i\', \'preg_lazyload\', $content);
}
add_filter(\'the_content\', \'filter_lazyload\');