微信公衆號文章中圖片加載時，佔位圖寬高大小的肯定

打開一篇多圖的微信公衆好文章。在圖片加載過程當中，咱們發現微信對每個img都塞了也個佔位圖，並且佔位圖的寬高就是實際加載完圖的寬高。這是如何作到的呢？

1.微信全部的img標籤裏,都有自定義的data-ratio,data-w.這兩個屬性是關鍵.

//data-w:是圖片的natural width.
  //data-ratio:是圖片的高/寬值.
  <img data-src="http://mmsns.qpic.cn/mmsns/yvia9lE3NdzrSMQ18VrVqjEUU5BeMx9WuDsSBp7Exm83L9IJdjpUXLQ/0" style="vertical-align: middle; box-sizing: border-box; width: 141px !important; height: 81.7359px !important; visibility: visible !important;" data-ratio="0.5796875" data-w="640" data-type="jpeg" class="img_loading" src="http://mmsns.qpic.cn/mmsns/yvia9lE3NdzrSMQ18VrVqjEUU5BeMx9WuDsSBp7Exm83L9IJdjpUXLQ/0?wx_lazy=1">

2.js設定img的width=data-w，heigth= width*data-ratio。

3.不過，在第2步設定寬高以前，請保證img的src屬性有有效的值，否則，第2步會無效，在這裏咱們添加一個base64的小點做爲佔位圖（以下）:

src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==";

4.再給img添加一些樣式：

.img_loading {
        background-color: #e3dcdc;
        border: 1 px solid #e3dcdc;
        background-size: 22px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(loading.gif);
}

5.當對應的img的圖片加載完成後，替換掉佔位圖，去掉class img_loading 就行了