摘要：打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢微信所有的标签里都有自定义的这两个属性是关键是图片的是图片的高宽值设定的，。
打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个img都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢？
1.微信所有的img标签里,都有自定义的data-ratio,data-w.这两个属性是关键.
//data-w:是图片的natural width. //data-ratio:是图片的高/宽值.
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 就好了
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51466.html
摘要：打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢微信所有的标签里都有自定义的这两个属性是关键是图片的是图片的高宽值设定的，。 打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个img都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢？ 1.微信所有的i...
阅读 2043·2021-09-26 10:21
阅读 2582·2021-09-08 09:36
阅读 2861·2019-08-30 15:56
阅读 765·2019-08-30 12:57
阅读 766·2019-08-26 10:39
阅读 3432·2019-08-23 18:11
阅读 2923·2019-08-23 17:12
阅读 833·2019-08-23 12:18
