资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信公众号文章中图片加载时，占位图宽高大小的确定

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

Kylin_Mountain / 2789人阅读

摘要：打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢微信所有的标签里都有自定义的这两个属性是关键是图片的是图片的高宽值设定的，。

打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个img都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢？

1.微信所有的img标签里,都有自定义的data-ratio,data-w.这两个属性是关键.

</>复制代码 
  1.   //data-w:是图片的natural width.
  2.   //data-ratio:是图片的高/宽值.
  3.

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

3.不过，在第2步设定宽高之前，请保证img的src属性有有效的值，不然，第2步会无效，在这里我们添加一个base64的小点作为占位图（如下）:

</>复制代码 
  1. src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==";

4.再给img添加一些样式：

</>复制代码 
  1. .img_loading {
  2.         background-color: #e3dcdc;
  3.         border: 1 px solid #e3dcdc;
  4.         background-size: 22px;
  5.         background-position: center center;
  6.         background-repeat: no-repeat;
  7.         background-image: url(loading.gif);
  8. }

5.当对应的img的图片加载完成后，替换掉占位图，去掉class img_loading 就好了

云服务器 GPU云服务器 微信公众号图片上传 微信公众号 公众号 网页 重新加载 微信公众号名字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51466.html

相关文章

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

    摘要：打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢微信所有的标签里都有自定义的这两个属性是关键是图片的是图片的高宽值设定的，。 打开一篇多图的微信公众好文章。在图片加载过程中，我们发现微信对每一个img都塞了也个占位图，而且占位图的宽高就是实际加载完图的宽高。这是如何做到的呢？ 1.微信所有的i...

    Cheng_Gang 评论0 收藏0

发表评论

登陆后可评论

0条评论

Kylin_Mountain

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<