背景
有些时候，我们需要监听图片加载完成之后做某些处理，如以下场景：图片文件太大的时候，从服务器获取加载很慢，会出现长时间图片窗口空白的情况下，那么我们需要给图片增加一个loading状态，提示用户图片正在加载，并且监听图片是否加载完成，当加载完成之后，关闭loading状态。
解决办法
- 法一：img的complete属性
<template> <img id="imgDom" :src="imgUrl" :loading="imgLoading" /> </template> <script> import { getImgApi } from '@/api/index'; export default { data () { return { imgUrl: '', } }, mounted() { this.getImg(); }, methods: { // 获取图片 getImg() { this.imgLoading = true; getImgApi().then((res) => { this.imgUrl = res.data; // 轮循complete，判断图片是否加载完成 let timer = setInterval(() => { const dom = document.getElementById('imgDom'); if(dom.complete) { console.log('图片加载成功') this.imgLoading = false; clearInterval(timer); } }, 50); }) } } } </script>
- 法二：load事件
所有浏览器都支持img的load事件
<template> <img id="imgDom" :src="imgUrl" :loading="imgLoading" /> </template> <script> import { getImgApi } from '@/api/index'; export default { data () { return { imgUrl: '', } }, mounted() { this.getImg(); const dom = document.getElementById('imgDom'); // onload监听，判断图片是否加载完成 dom.onload = function() { console.log('图片加载成功'); this.imgLoading = false; } }, methods: { // 获取图片 getImg() { this.imgLoading = true; getImgApi().then((res) => { this.imgUrl = res.data; }) } } } </script>
- readystatechange事件
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
<template> <img id="imgDom" :src="imgUrl" :loading="imgLoading" /> </template> <script> import { getImgApi } from '@/api/index'; export default { data () { return { imgUrl: '', } }, mounted() { this.getImg(); const dom = document.getElementById('imgDom'); // onreadystatechange监听，判断图片是否加载完成 dom.onreadystatechange = function() { if(dom.readyState=="complete"|| dom.readyState=="loaded"){ console.log('图片加载成功'); this.imgLoading = false; } } }, methods: { // 获取图片 getImg() { this.imgLoading = true; getImgApi().then((res) => { this.imgUrl = res.data; }) } } } </script>
