画像が読み込まれているかどうかを判断する js

バックグラウンド

場合によっては、次のようなシナリオのように、画像の読み込みを監視して何らかの処理を行う必要があります。画像ファイルが大きすぎると、サーバーからの読み込みが非常に遅くなり、画像ウィンドウが長時間空白になります。画像に読み込み状態を追加し、画像が読み込まれていることをユーザーに通知し、画像が読み込まれているかどうかを監視し、読み込みが完了したら読み込み状態を閉じる必要があります。

解決

1. 方法 1: img の完全な属性

   <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. 方法 2: ロード イベント
   すべてのブラウザは img のロード イベントをサポートします

   <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 は完了してロードされており、イメージがロードされたことを示します。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