Question

我希望在加载所有图像后执行一些代码执行（需要在特定位置设置滚动）。我使用nextTik（）但在加载图像之前处理代码。我们也不能使用已安装和创建的方法，因为代码应该在单击按钮后执行。有什么方法或技巧吗？感谢

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'
在每个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 enter link description here) 答案我做了这样的事情：

    <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();
       }
   },

在vuejs中渲染所有图像后执行代码

3 个答案: