码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-01-16 01:02:40      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:port   base   art   border   图片加载   order   box   enter   就是   

打开一篇多图的微信公众好文章。在图片加载过程中,我们发现微信对每一个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="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 就好了

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

标签:port   base   art   border   图片加载   order   box   enter   就是   

原文地址:https://www.cnblogs.com/jlfw/p/12199242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!