怎么保证html5的canvas里面image对象加载完成可以执行后面的代码

本文链接：https://blog.youkuaiyun.com/pqleo/article/details/39585559

本文介绍了如何使用HTML5 Canvas中的Image对象属性`complete`和事件`onload`来判断图片是否加载完成。通过设置计时器和监听`onload`事件，确保图片加载后执行后续代码。同时提到了`src`属性与`onload`事件顺序对程序的影响，并提供了回调函数和图片切换的网页代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一下 Image对象的属性

里面有一个 complete属性说的是图片完全加载完并显示在窗口上的时候这个值为true 否则为false

这样的话就可以通过这个属性来判断所需的图片是不是已经加载完毕了？

用一个循环 while（image.complete）？这样不知道为什么会陷入死循环。。换一种方式

用setInterval 设置一个计时器

我的代码里面是这样写的可以参考一下

<span style="font-family:KaiTi_GB2312;">        var timer = setInterval(function () {
                if (imageRTemp[Math.pow(2, layer) - 1][Math.pow(2, layer) - 1].complete) {  //判断最后一个图像是不是加载完毕
                    draw3D();//调用 <span style="color: rgb(51, 51, 51); line-height: 24px; font-size: 14px; background-color: rgb(245, 245, 245);">context.getImageData 获得图像数据</span>
                    Refining();//处理像素完后 用 putImageData放回像素数据
                    clearInterval(timer);
                }

            }

        }, 50);</span>

另外Image对象的另一个方法 onload是一个回调函数

就是当图像加载完毕后才会调用的，至于是不是显示到窗口上是不确定的

另外image.src和onload的前后顺序也得js的程序结果又影响可以参考这里（

js 实现图片预加载（js操作 Image对象属性complete ，事件onload 异步加载图片）

）

关于回调函数可以看这里（js回调函数(callback)）

附一个切换图片的网页代码防止自己忘记了

<span style="font-family:KaiTi_GB2312;"><!DOCTYPE html>
<html style="overflow: auto;">
<head>
	
	<title>3dTest</title>
	<script type="text/javascript">
		<!--
		var n = 1;
		function Change (event){

			var myImg = document.getElementById("myImg");
			var spanId = document.getElementById("spanID");

			if(event.value == "上一个图片")
			{
				n--;
				if(n == 0)n = 20;
				myImg.src = "3dTest/"+ n + ".jpg"; 
				spanId.innerText = "文件标题：" + n + ".jpg";		
			}
			else if(event.value == "下一个图片")
			{
				n++;
				if(n == 21) n = 1;
				myImg.src = "3dTest/" + n + ".jpg"; 
				spanId.innerText = "文件标题：" + n + ".jpg";		
			}
			//window.scrollTo(0,46);
			//alert(event.value);
		}
		
		function ImageChange(event){
			var myImg = document.getElementById("myImg");
			var spanId = document.getElementById("spanID");
			//alert(event.button);
			if(event.button == 2)
			{
				n--;
				if(n == 0)n = 20;
				myImg.src = "3dTest/"+ n + ".jpg"; 
				spanId.innerText = "文件标题：" + n + ".jpg";		
			}
			else if(event.button == 0)
			{
				n++;
				if(n == 21) n = 1;
				myImg.src = "3dTest/" + n + ".jpg"; 
				spanId.innerText = "文件标题：" + n + ".jpg";		
			}
		}
//οncοntextmenu="return false" onselectstart="return false"  屏蔽鼠标右键
	//-->
</script>

</head>
<body  >
	<div align = "center" >
		<span id = "spanID" style = "font-size:40px; color:blue; font-family:华文新魏;">文件标题:   1.jpg</span><br/>
		<div  onmousedown = "ImageChange(event)"  οncοntextmenu="return false" >
		<img id = "myImg" style = "height:700px ;" src="3dTest/1.jpg" /><br/>
		</div>
		<input style = "font-size:30px" type="button" value="上一个图片" οnclick="Change(this)"/>
		<input style = "font-size:30px" type="button" value="下一个图片" οnclick="Change(this)"/>
	</div>
</body>
</html></span>