WordPress访问速度加速:图片延迟加载lazyload教程

解释下什么是图片延迟加载:

在超出网站可视范围内，图片先不做加载也就是先不下载，先下载可视范围内的图片与整个网页文件.
等到用户滚动浏览器窗口，图片元素到达可视范围内，开始加载图片.

图片延迟加载可以节省网站的资源和加快WordPress网站访问速度，所以对于图片较多的wordpress网站来说，图片延迟加载功能还是非常的好的。

WordPress访问加速:图片延迟加载lazyload教程:

方法一: 使用WordPress插件jQuery Image Lazy Load
在WordPress插件安装界面搜索 jQuery Image Lazy Load 即可在线安装;

方法二: 手动让WordPress实现lazyload

这样我们就能弄懂WordPress如何实现 lazyload 的原理;

1.WordPress的模板的header.php需要加载lazyload必要文件:

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

注意:上面的fadeIn 是 加载图片使用的效果(淡入)

2.lazyload要求必须给图片地址添加一个data-original属性

那么有占位图的写法为: (占位图是指: 加载图片前的占位图片)

<img class="lazy" src="images/lazy.gif" data-original="images/example.jpg" width="640" height="480">

简单的无占位图也可以使用 (占位图是指: 加载图片前的占位图片)

<img class="lazy" data-original="images/example.jpg" width="640" height="480">

注意: 这些文件要确实存在,文件地址请自行修改.

你需要修改WordPress主题让你的主题自带图片带有上面的data-original属性与占位图

3.给WordPress里文章里插入的图片加data-original属性了,可以将下面的代码添加到当前主题 functions.php 文件中:

//给WordPress里文章里插入的图片加data-original属性
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/images/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;
}

4.WordPress里gravatar评论头像启用图片延迟加载:

用下面的代码:

<?php echo '<img class="avatar" src="' . get_bloginfo('template_directory') . '/img/loading.gif" alt="avatar" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar( $comment, '64' )) . '" />'; ?>

替换替换WordPress主题里的gravatar头像调用标准函数：

<?php echo get_avatar( $comment, '32' ); ?>

其他非WordPress通用图片延迟加载使用教程:

愿意看原版英文教程的请访问 lazyload

1.图片延迟加载的核心文件为 jquery.lazyload.js
2.lazyload 是一个Jquery 插件,所以还得引入jquery.min.js
于是你的网页需要引入这两个文件:

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

注意:上面的fadeIn 是 加载图片使用的效果(淡入)

2.lazyload要求必须给图片地址添加一个data-original属性

那么有占位图的写法为: (占位图是指: 加载图片前的占位图片)

<img class="lazy" src="images/lazy.gif" data-original="images/example.jpg" width="640" height="480">

简单的无占位图也可以使用 (占位图是指: 加载图片前的占位图片)

<img class="lazy" data-original="images/example.jpg" width="640" height="480">

注意: 这些文件要确实存在,文件地址请自行修改.

你需要修改WordPress主题让你的主题自带图片带有上面的data-original属性与占位图

注意网站图片带data-original属性的才支持图片延迟加载哦.