Javascript 在vuejs中呈现所有图像后执行代码

我想在加载所有图像后执行一些代码（需要在特定位置设置滚动）。我使用nextTik（），但代码在加载图像之前会被处理。我们也不能使用mounted和created这样的方法，因为代码应该在点击按钮后执行。 有什么方法或窍门吗？ 谢谢

您可以对每个图像使用事件来检查是否已加载所有图像

例如：

---

以下是我对既有“静态”图像又有任意数量的从数据库获取的图像的组件的方法：

• 将两项附加到组件数据：“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))
   }

         

...
（静态图像）
...
（动态图像）
...
数据（）{
返回{
...,
imgsLength:0，
加载管理长度：0，
...,
}
},
计算：{
就绪（）{
返回（this.loadedImgsLength>0&&this.loadedImgsLength==this.imgsLength）
}
},
异步创建（）{
…获取所有数据
this.$nextTick（（）=>this.$nextTick（this.imgsLength=this.$refs.myComponent.getElementsByTagName（“img”）.length））
}

基于（）答案，我做了如下操作：

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

（@load和@error出现在我页面上的每个图像上）和

handleImageLoad:函数（$event）{
var-images=$（'img:not（[loaded]））；
var target=$（$event.target）；
$（目标）.attr（'loaded'，true）；
如果（images.length智能方式，但图像路径是从数据库中获取的，我不知道存在多少图像。@MostafaAbedi您的数据结构是什么？如果您可以渲染它，当然可以动态计算它！让我描述更多。这是一个页面中的一组palceholder，我们从数据库中获取它们，其中一些占位符可能会保持不变语音和其他一些视频以及一些图像，在加载所有媒体后，我应该设置滚动位置。@MostafaAbedi hi。我意识到如果图像加载失败，
load
将不会触发。（图像404）。要修复添加，您可以使用“@error=“handleLoad”`来收听
错误事件
    <img class="card-img-top" :src=" 'images/' + (data.src || 'image-default.png') " 
    :alt="data.alt" @load="handleImagesLoad" @error="handleImagesLoad">

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

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