微信公众号文章中图片加载时，占位图宽高大小的确定

打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个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="https://img-blog.csdnimg.cn/2022010616081532892.gif";

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 就好了

总结

以上是生活随笔为你收集整理的微信公众号文章中图片加载时，占位图宽高大小的确定的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。