vuejs渲染完所有圖片后執行代碼

Question

我想在加載所有圖像后執行一些代碼（需要在特定位置設置滾動）。 我使用 nextTik() 但在加載圖像之前處理代碼。 我們也不能使用 mount 和 created 以及這樣的方法，因為代碼應該在點擊按鈕后執行。 有什么方法或技巧嗎？ 謝謝

Answer 1

您可以在每個圖像上使用load事件來檢查是否所有圖像都已加載。

示例： https : //jsfiddle.net/jacobgoh101/e5bd86k6/1/

<div id="app">
  <img @load="handleLoad"  @error="handleLoad" v-for="i in 10" :src="`https://picsum.photos/${Math.random()*300}/700/?random`"/>
</div>

Javascript

new Vue({
  el: "#app",
  data: {
    imgLoaded: 0
  },
  methods: {
    handleLoad: function(todo){
        this.imgLoaded++;
      if(this.imgLoaded === 10) {
        alert('all image loaded')   
      }
    }
  }
})

Answer 2

這是我對具有“靜態”圖像和從數據庫中獲取的任意數量的圖像的組件的方法：

• 將兩項附加到組件數據：'imgsLength' 和 'loadedImgsLength'
• 將“load”事件處理程序附加到每個 img 元素，增加“loadedImgsLength”
• 加載所有獲取的數據后，將 'imgsLength' 設置為所有 img 元素的數量

因此，您知道所有圖像在 'loadedImgsLength' > 0 和 'loadedImgsLength' == 'imgsLength' 時加載

在此示例中，在加載所有圖像之前，我的組件將不可見：

<template>
   <div v-show="ready" ref="myComponent">
      ...
      <img src="..." @load="loadedImgsLength++" />  (static image)
      ...
      <img v-for="img in fetchedImg" @load="loadedImgsLength++" />  (dynamic images)
   </div>
</template>

<script>
...
   data(){
      return {
         ...,
         imgsLength : 0,
         loadedImgsLength: 0,
         ...,
      }
   },

   computed: {
     ready(){
        return (this.loadedImgsLength > 0 && this.loadedImgsLength == this.imgsLength)
      }
   },

   async created(){
      ... fetch all data
      this.$nextTick(() => this.$nextTick(this.imgsLength = this.$refs.myComponent.getElementsByTagName("img").length))
   }

         

Answer 3

基於（ https://stackoverflow.com/a/50481269在此處輸入鏈接描述）回答我做了這樣的事情：

    <img class="card-img-top" :src=" 'images/' + (data.src || 'image-default.png') " 
    :alt="data.alt" @load="handleImagesLoad" @error="handleImagesLoad">

（@load 和 @error 在我頁面上的每個圖像上）和

   handleImagesLoad: function($event){
       var images = $('img:not([loaded])');
       var target = $($event.target);
       $(target).attr('loaded', true);

       if(images.length <= 1){
           $('#preloader').fadeOut();
       }
   },