• 前言

在寫html的時(shí)候熬丧，展示圖片的普通做法是直接在img標(biāo)簽的src寫上圖片url，按道理說這樣也是網(wǎng)頁完全加載總時(shí)間花費(fèi)最少的方案怀挠。但是析蝴，一旦加載高清大圖，就會(huì)使用戶體驗(yàn)變得很差绿淋，比如說闷畸，會(huì)在網(wǎng)而未加載完前會(huì)有段時(shí)間出現(xiàn)一大片空白。

• 優(yōu)化方案（基于jquery）

1. 在圖片加載完前吞滞，用loading代替佑菩，讓用戶不會(huì)感覺有瀏覽器“假死”的感覺；
2. 判斷是否緩存裁赠，已緩存則不再請(qǐng)求殿漠，提升二次加載的速度；
3. 容錯(cuò)佩捞，在圖片url出錯(cuò)的時(shí)候绞幌，用默認(rèn)圖片代替。
   PS：關(guān)于loading一忱，這個(gè)可以自己寫動(dòng)畫莲蜘，也可以直接使用gif圖片谭确。前者是減少了請(qǐng)求數(shù)，但對(duì)于沒有css3基礎(chǔ)的做起來會(huì)有點(diǎn)小麻煩菇夸，后者是簡(jiǎn)單有效琼富。

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

Paste_Image.png

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

接著是等正真要展示的圖片加載完替換gif仪吧，這個(gè)可以使用js的image對(duì)象庄新。

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){
  // 已經(jīng)被瀏覽器緩存
  $("img").prop('src', src);
}else{
  img.onload = function(){ 
    // 圖片加載完成
    $("img").prop('src', src);
  };
}

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

// 容錯(cuò)也是很簡(jiǎn)單薯鼠，在else{}中加容錯(cuò)
var default = "http://ohi69gup6.bkt.clouddn.com/default.jpeg";
img.onerror = function(){
  $("img").prop('src', default);
}

• 最后封裝成一個(gè)圖片處理對(duì)象

// 圖片處理對(duì)象[懶加載择诈、模擬cover、loading圖]
function ImgHandle(sender){
    var conf = {
        ele: 'img',  //默認(rèn)的元素節(jié)點(diǎn)
        isFull: false,  // 是否將圖片鋪滿出皇，默認(rèn)不鋪滿(關(guān)于這個(gè)功能可以看我另一篇關(guān)于模擬cover和contain效果展示圖片的文章)
        default: '/Public/images/default.jpg',  //默認(rèn)的默認(rèn)圖片url
        imgSourceTarget: 'data-src',  // 存放資源圖片的默認(rèn)元素節(jié)點(diǎn)屬性名
        fullWidthClass: 'full-width',  // width: 100%;的默認(rèn)類名
        fullHeightClass: 'full-height',  //height: 100%;的默認(rèn)類名
    };
    conf = $.extend(conf, sender);

    var frameSize;
    var $parent = $(conf.ele).parent();
    
        // 懶加載圖片函數(shù)
    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);
            }
        }
    };
        // 遍歷每個(gè)需要處理的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);
            }
        }
    });
}

引入上面的圖片處理對(duì)象后就可以更簡(jiǎn)單的處理圖片

• 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>