小程序图片预占位加载

手机QQ 浏览器大家都知道，图文混排最常见了，一打开文章文字显示，图片是一个预占位然后显示，且图片是按照预占位大小显示的,图片不变形不撑开区域,这效果没的说，我喜欢！
分析下：实现这效果 预占位大小和图片大小一致， 既然一致那就有办法。
1.首先我们知道图文混排是A页面与B页面的关系
2. A页面是文章列表（竖这一排一排的）B页面是文章详情页面
3. 用户点击A页面某一排，进入B页面详情

实现思路：当用户点击A页面的 某排数据时，在跳转前就获得图片尺寸(单张||多张),并把得到尺寸传递给B页面。当B页面拿到数据后图片尺寸就是预占位尺寸。

1 不使用小程序自带的图片缩放，根据当前屏幕宽高及图片尺寸按比例进得到一个缩放值（避坑,在使用以下代码前,你得提前获取到每张图片的原始宽度高）

/*@ e 是原始图片含图宽高
  @ p  百分比 90 / 100
       使用场景 有的时候图片是在一个90%容器了
       如果是按照屏幕的可视区来就没办法缩放了
       要按照容器的宽度来计算图片缩放尺寸
 
 */
function imageUtil(e,p) {
  var imageSize = {};
  var originalWidth = e.detail.width;//图片原始宽
  var originalHeight = e.detail.height;//图片原始高
  var originalScale = originalHeight/originalWidth;//图片高宽比
  // console.log('originalWidth: ' + originalWidth)
  // console.log('originalHeight: ' + originalHeight)
  //获取屏幕宽高
  wx.getSystemInfo({
    success: function (res) {
      var windowWidth = res.windowWidth * p ;
      var windowHeight = res.windowHeight;
      var windowscale = windowHeight/windowWidth;//屏幕高宽比
      // console.log('windowWidth: ' + windowWidth)
      // console.log('windowHeight: ' + windowHeight)
      if(originalScale < windowscale){//图片高宽比小于屏幕高宽比
        //图片缩放后的宽为屏幕宽
         imageSize.imageWidth = windowWidth;
         imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
      }else{//图片高宽比大于屏幕高宽比
        //图片缩放后的高为屏幕高
         imageSize.imageHeight = windowHeight;
         imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
      }
     
    }
  })
  // console.log('缩放后的宽: ' + imageSize.imageWidth)
  // console.log('缩放后的高: ' + imageSize.imageHeight)
  return imageSize;
}
 
module.exports = {
  imageUtil: imageUtil
}