ミニプログラムの滝の流れ

.fall {
  display: flex;
  background-color: #f7f7f7;
}

.fall-column {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.fall-column-item {
  margin-top: 30rpx;
  line-height: 0;
}

.fall-column-item-img {
  width: 330rpx;
}

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i in results) {
      results[i].cover = results[i].imageUrl
      // 获取图片信息
      let info = await this.loadImage(results[i].cover)
      results[i].height = 165 / info.width * info.height
      if (i  {
      wx.getImageInfo({
        src: cover,
        success: (res) => {
          resolve(res)
        }
      })
    })
  }
})

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i = 0; i  {
      wx.getImageInfo({
        src: cover,
        success: (res) => {
          resolve(res)
        }
      })
    })
  }
})

let fetchPicInfo = async (url) => {
  let [err, result] = await to(testFly.get(`${url}?x-oss-process=image/info`))
  if (err) throw err
  return result.data
}

import api from '../../api/index'
Page({
  data: {
    list: [],
    heightArr: []
  },
  async onLoad () {
    let {results} = await api.fetchImages()
    let col = 2
    for (let i = 0; i <p>このメソッドにより、イメージの読み込み時間を大幅に短縮できます。イメージをローカルにダウンロードする必要はありません。画像情報を取得するためにサーバーに直接リクエストします。画像情報に加えて、各リクエストは基本的な画像情報のいくつかのフィールドのみを返すため、図に示すようにリクエスト時間も非常に短くなります。 <br>## この方法により、ユーザーは画像の表示が速くなり、画像が読み込まれるときにトランジション効果も追加されるため、エクスペリエンスが向上します<img src="https://img.php.cn/upload/image/137/787/730/1592535565112393.png" title="1592535565112393.png" alt="ミニプログラムの滝の流れ">#概要</p><p>この記事では、次のことについて説明します最近小さなプログラムを書いているときに遭遇したウォーターフォール フロー より詳細な要約 さまざまな状況下でさまざまな読み込みスキームを選択する 最良のエクスペリエンスは、もちろん、サーバーが画像情報を直接返すことです。これにより、取得にかかる時間を大幅に節約できます小さなプログラムのウォーターフォール フローを作成するときに役立つと幸いです。 </p><h2>エラーや不正確な点がある場合は、批判して修正してください。気に入っていただけましたら、ぜひ気に入ってください。</h2><p>推奨チュートリアル: 「<br>WeChat ミニ プログラム#」 ##"<br></p>