IT博客汇 | 图片加载优化及图片lazyload自适应

图片加载优化及图片lazyload自适应

ivan发表于 2016-08-20 17:10:00

前言

本文介绍针对轩枫阁V3主题开发过程中，遇到的图片问题及加载优化。

图片居中裁剪

本站的每一篇文章，都会配一张570×200的特色图像，使文章不那么单调。

然而移动端移动端首页图片为60×60的正方形配图，这里有两种解决方案。

设置缩略图大小，在wp管理端-设置-多媒体，设置缩略图尺寸为1:1
结合CSS3的background-size，将配图作为背景图，并显示中间的正方形区域即可

方法一可以安装插件，将旧文章的图片重新生成。由于轩枫阁在V3主题上线前，已更新400篇文章，使用方法一意味着图片存储会增加，而且意义不大。

而这一表现仅在移动端，所以可以完美使用CSS3,。

.thumb{
    background-image: url(http://www.xuanfengge.com/wp-content/uploads/2016/04/gfdgfdgf-300x105.jpg);
    background-size: cover;
    background-position: center center;
}

lazyload

lazyload即图片懒加载，滚动到的图片才会加载，节省流量及加快加载速度，提升体验。

wp如何使用lazyload呢？在functions.php加上如下代码

// lazyload
function lazyload($content) {
    if(!is_feed() || !is_robots) {
        $content = preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img class=\"lazyload\" \$1data-original=\"\$2\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAOHh4QAAACH5BAAAAAAALAAAAAABAAEAQAICRAEAOw==\"\$3>\n", $content);
    }
    return $content;
}
// 文章内容
add_filter('the_content', 'lazyload');
// 特色图像
add_filter('post_thumbnail_html', 'lazyload');

这时候所有的图片src会替换成灰色底图，可以结合lazyload.js（推荐用jieyou的版本，jquery.lazyload.js提供的方法不够多）。

// js代码
$("img.lazyload").lazyload();

PC端

使用之后，会发现存在一些问题。如发现图片加载之后，页面发生抖动，或者超大图产生变形的问题。

在PC端如果从上往下读，正常网速下，图片抖动的机会比较小，所以这个点只在移动端处理。

页面输出的img结构

<img class="lazyload" data-original="http://localhost/xuanfeng-v3.0/wp-content/uploads/2016/01/xzbfxbzf.png" src="data:image/gif;base64,R0lGODlhAQABAIAAAOHh4QAAACH5BAAAAAAALAAAAAABAAEAQAICRAEAOw==" alt="xzbfxbzf" width="640" height="408">

其中会包括图片本身的宽高，data-original为原图url。

发现对于超出页面显示宽度的大图，会存在变形的问题，如1200×848的图（文章地址），自适应会显示成802×848的尺寸：

这里为了不产生变形，得在加载之后，给图片增加样式 height: auto; 防止变形。这里是使用增加class的方法，同时将fadeIn的效果用CSS3的形式加入（js插件本身支持动画，但是CSS3动画性能更好）。代码如下：

// lazyload js代码
$("img.lazyload").lazyload({
    effect: "show",
    data_attribute: 'original',
    threshold: 100,
    load: function($elements, elements_left, options){
        // 不能设置否则图像 未加载时宽高比1:1 不设置大图会不正常比例
        // 所以在lazyload之后手动加上
        // 同时结合CSS3处理fadeIn动画
        $elements.addClass('autoheight');
    }
});

autoheight的样式为

.autoheight {
    height: auto;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

效果图

移动端

在移动端中，文章图片的尺寸往往大于屏幕宽度，图片加载完成后会发生抖动。

在图片加载之前，得对图片设置宽高，而图片的宽高得根据不同设备的分辨率来处理，JS处理代码如下：

function imgInit(){
    var $img = $('img.lazyload');
    // 设置图片样式
    var setLazyloadImgStyle = function(img, _width, _height){
        !isNaN(_width) ? _width+='px' : 'auto';
        !isNaN(_height) ? _height+='px' : 'auto';
        img && img.css({
            'width': _width + ' !important',
            'height': _height + ' !important',
            'visibility': 'visible !important'
        });
    }

    $img.each(function(){
        var _width = $(this).attr('width') || this.width;
        var imgWidth = _width > winWidth ? winWidth : _width,
            imgHeight = this.height * imgWidth / _width;
        setLazyloadImgStyle($(this), imgWidth, imgHeight);
    });

    // lazyload
    $img.lazyload({
        effect: 'show',
        threshold: 100,
        data_attribute: 'original', // 图片的真实url属性
        placeholder_data_img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQzA1MTVGNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDQzA1MTYwNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNDMDUxNUQ2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNDMDUxNUU2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6p+a6fAAAAD0lEQVR42mJ89/Y1QIABAAWXAsgVS/hWAAAAAElFTkSuQmCC',
        // 图片加载完毕时回调
        load: function($element, elements_left, options){
            setLazyloadImgStyle($element, 'auto', 'auto');
        }
    });
}
imgInit();

效果图