优化图片加载用户体验的简单解决方案

• 前言

在写html的时候，展示图片的普通做法是直接在img标签的src写上图片url，按道理说这样也是网页完全加载总时间花费最少的方案。但是，一旦加载高清大图，就会使用户体验变得很差，比如说，会在网而未加载完前会有段时间出现一大片空白。

• 优化方案（基于jquery）

1. 在图片加载完前，用loading代替，让用户不会感觉有浏览器“假死”的感觉；
2. 判断是否缓存，已缓存则不再请求，提升二次加载的速度；
3. 容错，在图片url出错的时候，用默认图片代替。
   PS：关于loading，这个可以自己写动画，也可以直接使用gif图片。前者是减少了请求数，但对于没有css3基础的做起来会有点小麻烦，后者是简单有效。

http://ohi69gup6.bkt.clouddn.com/loading.gif

Paste_Image.png

http://ohi69gup6.bkt.clouddn.com/timg.jpeg

接着是等正真要展示的图片加载完替换gif，这个可以使用js的image对象。

var src = "http://ohi69gup6.bkt.clouddn.com/timg.jpeg";
var img = new Image();
img.src = src;
img.onload = function(){ 
    // 图片加载完成
    $("img").prop('src', src);
};

// 在上面代码稍作修改，加缓存判断
if(img.complete){
  // 已经被浏览器缓存
  $("img").prop('src', src);
}else{
  img.onload = function(){ 
    // 图片加载完成
    $("img").prop('src', src);
  };
}

http://ohi69gup6.bkt.clouddn.com/default.jpeg

// 容错也是很简单，在else{}中加容错
var default = "http://ohi69gup6.bkt.clouddn.com/default.jpeg";
img.onerror = function(){
  $("img").prop('src', default);
}

• 最后封装成一个图片处理对象

// 图片处理对象[懒加载、模拟cover、loading图]
function ImgHandle(sender){
    var conf = {
        ele: 'img',  //默认的元素节点
        isFull: false,  // 是否将图片铺满，默认不铺满(关于这个功能可以看我另一篇关于模拟cover和contain效果展示图片的文章)
        default: '/Public/images/default.jpg',  //默认的默认图片url
        imgSourceTarget: 'data-src',  // 存放资源图片的默认元素节点属性名
        fullWidthClass: 'full-width',  // width: 100%;的默认类名
        fullHeightClass: 'full-height',  //height: 100%;的默认类名
    };
    conf = $.extend(conf, sender);

    var frameSize;
    var $parent = $(conf.ele).parent();
    
        // 懒加载图片函数
    var lazyImg = function($this, img, src){
        $this.prop('src', src);
        if(conf.isFull){
            if(img.width / img.height > frameSize.w / frameSize.h){
                $this.addClass(conf.fullHeightClass);
            }else{
                $this.addClass(conf.fullWidthClass);
            }
        }
    };
        // 遍历每个需要处理的img元素
    $(conf.ele).each(function(){
        frameSize = {
            w: $(this).parent().width(),
            h: $(this).parent().height()
        };
        var $this = $(this);
        var src = $this.attr(conf.imgSourceTarget);
        var img = new Image();
            img.src = src;
        if(img.complete){
            lazyImg($this, img, src);
        }else{
            img.onload = function(){ lazyImg($this, img, src); };
            img.onerror = function(){
                console.log('img load error: '+img.src);
                $this.addClass(conf.fullWidthClass);
                $this.prop('src', conf.default);
            }
        }
    });
}

引入上面的图片处理对象后就可以更简单的处理图片

• html：

<img class="issax" data-src="http://ohi69gup6.bkt.clouddn.com/timg.jpeg"
 src="http://ohi69gup6.bkt.clouddn.com/loading.gif">

• javascript:

<script type="text/javascript">
  var imgHandle = new ImgHandle({
    ele: '.issax',
  });
</script>