Vue でのプリロード監視の使用法

ここで、vue を使用して画像の監視をプリロードする方法の例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

アプリケーションのシナリオを見る

画像の量が多い場合、ページ上のすべての画像が確実に読み込まれるようにするために、誰もが画像のプリロードに遭遇したことがあると思います。次に、いくつかの ajax リクエストまたは論理操作を実行します

次に、computed を使用してデータの一部を監視し、一連の論理操作と ajax リクエストを実行します。computed を使用する場合は、それを実装することもできます。 、監視のみを使用できます

 <template>
 <p v-show=show>
  <img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">
  <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
  <img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">
  <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
 </p>
</template>
<script>
 export default {
  mounted () {
   var _this = this
   let imgs = document.querySelectorAll(&#39;img&#39;)
   console.log(imgs)
   Array.from(imgs).forEach((item)=>{
    let img = new Image()
    img.onload = ()=>{
     this.count++
    }
    img.src=item.getAttribute(&#39;src&#39;)
   })
  },
  data () {
   return {
    count : 0,
    show : false
   }
  },
  watch : {
   count (val,oldval) {
    if(val == 4){
     this.show = true
     alert("加载完毕")
     //然后可以对后台发送一些ajax操作
    }
   }
  }
 }
</script>

4つの写真がすべて読み込まれるまでページが表示されないことがわかります

Wan Fangによると、非常に重要な文があります

計算された属性は状況はより適切ですが、場合によってはカスタム ウォッチャーも必要になります。これが、Vue が監視オプションを通じてデータ変更に応答するためのより一般的な方法を提供する理由です。これは、データの変更に応じて非同期または高コストの操作を実行する場合に便利です。

この公式理解を踏まえて、全体的な個人的な理解をまとめてみます。計算済みの概要を与えて監視し、これらのポイントの概要を覚えておき、プロジェクトで作業するときにこれらの概要について考えて、アプリケーション方法を選択します

計算済み:

複数のデータまたは維持する 1 つのデータを監視します ステータスを返します1 つ以上のデータが変更される限り、関数本体全体が再計算され、ステータス値が再度返されます。

これがある限り、監視データは 1 つだけです。データが変更されると、2 つのパラメーターが返されます。1 つ目は現在の値で、2 つ目は変更前の値です。変更があるたびに、関数本体の論理動作がトリガーされ、後続の論理演算が実行されます上記。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

jestを使って反応ネイティブコンポーネントをテストする方法を詳しく解説

vueですべて選択してデータバインディングと取得を実現

mint-uiのtimeプラグインを使って取得選択値

以上がVue でのプリロード監視の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。