Javascript 加载事件未在Vue.js 2中动态加载的图像上触发
Vue:2.5.2,Axios:0.21.1 我试图找出所有的图片是什么时候加载到下面的页面上的。此代码适用于加载时已知图像URL的主页。但在这里,图像是从外部JSON文件加载的,然后添加到页面中。未使用以下代码触发@load事件。我该如何解决这个问题Javascript 加载事件未在Vue.js 2中动态加载的图像上触发,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,Vue:2.5.2,Axios:0.21.1 我试图找出所有的图片是什么时候加载到下面的页面上的。此代码适用于加载时已知图像URL的主页。但在这里,图像是从外部JSON文件加载的,然后添加到页面中。未使用以下代码触发@load事件。我该如何解决这个问题 <template> <div class="container"> <div v-if="loading" class="loading"&g
<template>
<div class="container">
<div v-if="loading" class="loading">
Loading...
</div>
<div v-if="!loading" class="error">
<h1>{{ project.title }}</h1>
<p class="intro">{{ project.description }}</p>
<div v-for="image in project.images" v-bind:key="image.url" class="images">
<div class="image">
<a class="" href="">
<img @load="handleLoad" :src="'static/projects/'+image.url" :width="image.width" :height="image.height"
class="img"/>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Project',
data () {
return {
loading: true,
project: {},
error: null,
imgLoaded: 0
}
},
created () {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
const fetchedSlug = this.$route.params.slug
axios.get('/static/data/' + fetchedSlug + '.json')
.then((response) => {
if (this.$route.params.slug !== fetchedSlug) return
this.project = response.data
}, (error) => {
this.error = error.toString()
})
},
handleLoad: function () {
console.log('Load')
this.imgLoaded++
if (this.imgLoaded === Object.keys(this.project.images).length) {
this.loading = false
}
}
}
}
</script>
加载。。。
{{project.title}
{{project.description}
从“axios”导入axios
导出默认值{
名称:'项目',
数据(){
返回{
加载:对,
项目:{},
错误:null,
imgLoaded:0
}
},
创建(){
this.fetchData()
},
观察:{
“$route”:“fetchData”
},
方法:{
获取数据(){
this.error=this.post=null
这是真的
const fetchedSlug=this.$route.params.slug
axios.get('/static/data/'+fetchedSlug+'.json'))
。然后((响应)=>{
如果(this.$route.params.slug!==fetchedSlug)返回
this.project=response.data
},(错误)=>{
this.error=error.toString()
})
},
handleLoad:函数(){
console.log('Load'))
这是我的荣幸++
if(this.imgLoaded==Object.keys(this.project.images.length){
此参数为0。加载=错误
}
}
}
}