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

先看一下 Image对象的属性

怎么保证html5的canvas里面image对象加载完成可以执行后面的代码_第1张图片

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

怎么保证html5的canvas里面image对象加载完成可以执行后面的代码_第2张图片


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

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

用setInterval  设置一个计时器

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

        var timer = setInterval(function () {
                if (imageRTemp[Math.pow(2, layer) - 1][Math.pow(2, layer) - 1].complete) {  //判断最后一个图像是不是加载完毕
                    draw3D();//调用 context.getImageData 获得图像数据
                    Refining();//处理像素完后 用 putImageData放回像素数据
                    clearInterval(timer);
                }

            }

        }, 50);


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

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

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

js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)

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



  



怎么保证html5的canvas里面image对象加载完成可以执行后面的代码_第3张图片

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




	
	3dTest
	



	
文件标题:   1.jpg



你可能感兴趣的:(html)