打开一篇多图的微信公众好文章。在图片加载过程当中,咱们发现微信对每个img都塞了也个占位图,并且占位图的宽高就是实际加载完图的宽高。这是如何作到的呢?微信
1.微信全部的img标签里,都有自定义的data-ratio,data-w.这两个属性是关键.url
//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。3d
3.不过,在第2步设定宽高以前,请保证img的src属性有有效的值,否则,第2步会无效,在这里咱们添加一个base64的小点做为占位图(以下):code
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 就行了it