IT博客汇 | WordPress教程:让WordPress图片和头像延迟加载

WordPress教程:让WordPress图片和头像延迟加载

小残发表于 2016-11-13 18:00:47

让wordpress图片和头像延迟加载的好处就是可以提升部分页面的加载速度，其实可以将静态资源托管到七牛云存储以及使用七牛来缓存静态文件，从而提升网站的速度。

关于wordpress图片延迟加载:

如果您的文章本身加载了较多或者较大的图片，那么延迟加载图片后首先载入页面，延迟载入图片，从而大大改善访客的体验。

关于头像延迟加载：七牛本身具有多个CDN加速节点，速度是很快的，但是将gravatar头像缓存到七牛这个过程可能需要一点时间，如果您的页面中出现从未缓存过的头像可能还是有点慢，那么这篇文章可以很好的解决上面的两个问题。

一、添加jquery.lazyload.js 插件

首先下载jquery.lazyload.js 插件，将压缩包内的js文件和图片文件全部解压至主题根目录。并将下面的代码添加到主题目录下的footer.php文件中进行引入。

<script src="<?php echo get_template_directory_uri(); ?>/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            effect:"fadeIn"
          });
        });
</script>

二、图片延迟加载

按照官网的说明需要将图片添加一个data-original属性，不过手动添加比较麻烦，只需要将下面的代码添加到主题目录下的functions.php文件中，这样就会自动为每一张图片添加data-original属性，从而达到图片延迟加载的目的。

//延迟加载图片
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/loading.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}
//延迟加载图片END

三、Gravatar头像延迟加载

wordpress默认使用Gravatar头像，因此总会受到头像的影响而拖慢整个页面的加载速度，再functions.php文件中（可能在这个文件，根据您自己的主题情况而定）

找到代码一，将其替换为代码二。

//这是代码一，需要用代码二将其替换
<?php echo get_avatar( $comment, '32' ); ?>

//这是代码二，用这段代码替换代码一
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/load_min.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}

通过上面的三个步骤即可实现wordpress图片和头像延迟加载的目的，好处就是只有浏览到图片位置时才加载图片，可以提高多图片页面的加载速度，减轻服务器负担。坏处是：可能会影响到搜索引擎对图片的收录，还有就是部分浏览器打开页面会出现空白。不过目前从观察来看绝大部分主题已经默认使用此功能，有需要的可参考。