js判断图片是否加载完成

背景

有些时候，我们需要监听图片加载完成之后做某些处理，如以下场景：图片文件太大的时候，从服务器获取加载很慢，会出现长时间图片窗口空白的情况下，那么我们需要给图片增加一个loading状态，提示用户图片正在加载，并且监听图片是否加载完成，当加载完成之后，关闭loading状态。

解决办法

1. 法一：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>
   

2. 法二：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>
   

3. 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>
   

文章参考

https://tool.4xseo.com/a/6148.html