WeChatウィジェットimageのロードに成功する前にデフォルトのビットマップが表示されます

WeChatウィジェットでは、Imageコンポーネントを使用して画像を表示します.画像ソースはローカルリソースでもサーバリソースでも構いません.しかし、コンテンツのダイナミックな表示のために、imageのピクチャソースとしてサーバリソースを使用することがほとんどです.サーバリソースである以上、ネットワークの速度に依存する必要があり、ネットワークが遅い場合、imageでピクチャをロードするプロセスが非常に遅い可能性があるため、ピクチャをロードする過程で、処理をしなければ、ピクチャのロードが完了するまで空白の状況が発生し、これは非常に悪いユーザー体験である.
ユーザ体験度を向上させるために、空白を表示するのではなく、画像のロードが完了する前に、ローカルのデフォルトの占有画像を事前に表示することができます.
ウィジェットのimageコンポーネントはデフォルトの画像の属性を提供していません.私たち自身がこの機能を実現する必要があります.
実装の原理
WeChatウィジェットのimageコンポーネントには、次の2つのプロパティがあります.
属性名
を選択します.
説明
binderror
HandleEvent
エラーが発生した場合、AppServiceにパブリッシュされるイベント名、イベントオブジェクトevent.detail={errMsg:'something wrong'}
bindload
HandleEvent
画像の読み込みが完了すると、AppServiceにパブリッシュされるイベント名、イベントオブジェクトevent.detail={height:'ピクチャ高さpx'、width:'ピクチャ幅px'}
この2つのイベントを実現できます.

はbindloadを実現し、画像がロード完了していない場合、ビットマップを表示し、ロードが完了すると、すぐにビットマップを非表示にし、真の業務画像

を表示する.

はbinderrorを実現し、ピクチャのロードエラー時にビットマップを表示する.

具体的な実装
新しいウィジェットプロジェクト
WeChat開発者ツールを開き、新しいウィジェットプロジェクトDemoを作成し、不要なコードを削除します.
カスタムコンポーネント
実際の開発では、複数の場所でimageコンポーネントが使用され、使用する場所ごとに1回のビットマップ機能を実現すれば、コード量を増やすだけでなく、メンテナンス量も増加するので、これらの論理をカスタムコンポーネントにカプセル化することができ、ここではimage-loaderと名付けられ、その後、どの場所でも使用することができます.image-loaderの代わりにimageを直接使えばいいです.
新規image-loaderWeChat開発ツールを使用してカスタムコンポーネントを新規作成し、プロジェクトのディレクトリcomponentsに配置します.次に、プロジェクトのimagesディレクトリの下に配置された占拠図を見つけ、完了した後
現在のプロジェクトのディレクトリ構造:

$ tree
.
├── app.js
├── app.json
├── app.wxss
├── components
│   ├── image-loader.js
│   ├── image-loader.json
│   ├── image-loader.wxml
│   └── image-loader.wxss
├── images
│   └── placeholder800x400.png
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── project.config.json

image-loaderの実装image-loaderには、2つのimage、1つのimageがデフォルトのピクチャをロードし、1つのimageが真のピクチャをロードします.説明の便宜上、この2つのimageをimage-defaultとimage-realと呼ぶ
初期化時には、image-defaultピクチャが表示されます.また、image-realも一緒にロードされますが、cssプロパティ制御によってimage-realは表示されません.

.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}

その後、image-realにbindloadおよびbinderrorを実装し、ロードが完了して成功した後、image-defaultのwidthおよびheightを空にすると、image-defaultは表示されなくなり、image-realのwidhthおよびheightを元の値に戻し、opcityを1に設定する.
以下にすべてのコードを貼り付けます
image-loader.js

/**
 *        
 */
Component({
  properties: {
    //    
    defaultImage: String,
    //    
    originalImage: String,
    width: String,
    height: String,
    //    mode， Image   mode
    mode: String
  },
  data: {
    finishLoadFlag: false
  },
  methods: {
    finishLoad: function (e) {
      this.setData({
        finishLoadFlag: true
      })
    }
  }
})

image-loader.jsong

{
  "component": true,
  "usingComponents": {}
}

image-loader.wxml

image-loader.wxss

.before-load {
  width: 0;
  height: 0;
  opacity: 0;
}

注意:ここでは簡略化のためにimageのbindloadのみが実現され、binderrorは実現されていません.
テスト
最後に、pages/indexページのコードを修正してテストします.

プラグイン

を有効にする
index.json

{
    "usingComponents": {
      "image-loader": "/components/image-loader"
    }
}

テストコード:

index.wxml

ソースコード
完全なコンポーネントのソースコードは私はGithubの上に置いて、みんなは見ることができます:wx-mini-image-preload