WordPress 图片异步加载
05
12 月

WordPress 图片异步加载

图片是网页中占用宽带大户,比JS、CSS相比大很多,而且后者重用率很高。设置合适的缓存时间后,JS和CSS能够直接从本地加载,而图片往往因页面而异。异步加载有效的减少了页面阻塞,也可以节约服务器资源。

通常的方案是不为图片标签设置正确的src地址,然后通过JS来赋予src正确的值,就实现了异步加载。对于异步加载,也可以直接全部加载,可以根据页面滚动scroll等动作来加载,以下内容基于jQuery。

img标签和src属性值

<img src="http://mydomain.com/myimage.jpg">

一张图片显示,只要如上面代码中有合法的src地址就能显示,要考虑到SEO和多平台显示就显得不够了,当先最新版本 WordPress 中默认显示如下:

<img class="alignnone size-full wp-image-63000" src="http://mydomain.com/myimage.jpg" title="myimage" alt="" width="600" height="800" srcset="http://mydomain.com/myimage.jpg 600w, http://mydomain.com/myimage-300x400
.jpg 300w" sizes="(max-width: 800px) 100vw, 800px">

其中图片地址除了src外还有一个srcset,能够根据视口宽度来选者加载那一张图片,如果缺少src值会直接显示srcset属性中的图片,所以两个属性值都要替换掉。通过在function.php中添加函数来替换着两个标签,如下:

function article_img($content) {
    $img_regex='~(<img[^>]+)src(\s)?=~';
    $srcset_regex='~(<img[^>]+)srcset(\s)?=~';
    $content = preg_replace($img_regex,'$1data-original=', $content);
    $content = preg_replace($srcset_regex,'$1srcset-original=', $content);
    echo $content;	
}
add_filter('the_content','article_img');

srcsrcset的真实值分别赋给data-originalsrcset-original,其中data-original属性确实存在,而srcset-original是我杜撰的。

直接异步加载

异步加载即还原srcsrcset两个属性值:

<script>
$('img').each(function(){
  $(this).attr('src', $(this).attr('data-original')).attr('srcset', $(this).attr('srcset-original'));
});
</script>

按需异步加载

这里介绍按需异步加载,即首屏图片直接异步加载,其他图片在页面滚动至当前视口再加载

var viewHeight = $(window).height();//视口高度
//首屏直接加载
$('img').each(function () {
        if ($(this).offset().top <($(window).scrollTop() + viewHeight)) {
            $(this).attr('src', $(this).attr('data-original')).attr('srcset', $(this).attr('srcset-original'));
        }
});
//其他按需加载
$(window).scroll(function () {
    $('img').each(function () {
        if ($(this).offset().top <($(window).scrollTop() + viewHeight)) {
            $(this).attr('src', $(this).attr('data-original')).attr('srcset', $(this).attr('srcset-original'));
        }
    });
});

2 条评论

  1. avi91112016 年 12 月 13 日上午 1:14 回复

    能评论么
    重点是
    $(‘img’).each(function () {
    前面写一大堆有什么用?

    • snowtraces*2016 年 12 月 13 日上午 1:24 回复

      重点在于逻辑,模板处可以直接覆盖src地址,文章中直接正则表达式替换src地址,或者插入图片时用hook替换也行