When the micro-channel public number article image loading, occupying the width and height to determine the size of the map

Open the micro-channel public good articles more than one graph. In the picture the loading process, we found that a micro-channel for each img are also stuffed a placeholder chart, graph width and height and footprint is actually finished loading map width and height. This is how to do it?

1. The micro-channel all img tag, data-ratio has customized, data-w. These two properties are crucial.

  //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. However, before the second step width is set to High, to ensure valid img src attribute value, otherwise, step 2 will be ineffective, where we add a small dot as a placeholder FIG base64 (below):

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

4. Add some style to give 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. When the corresponding image is loaded img, replace the placeholder FIG remove enough class img_loading

Guess you like