这篇文章给大家分享的是有关在HTML5如何实现图片预加载的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

基本代码如下：

varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");varimage=newImage();image.src="images/01.jpg";context.drawImage(image,0,0);

不过我们会发现这样写是无法显示出图片的，因为图片并没有加载完全，我们就调用了drawImage方法，我们可以使用img的onload方法，使图片加载完全后

在执行drawImage操作，代码如下：

varimage=newImage();image.src="images/01.jpg";image.onload=function(){context.drawImage(image,0,0);}

或者使用<img>标签先加载图片：

<imgsrc="images/01.jpg"id="image">

然后使用getElementById来获得图片对象：

varimage=document.getElementById('image');

但是在图片较多的情况下，使用上面两种方式都不是太优雅，我们可以使用下面的方法，等待所有图片加载完全后，再执行其他操作：

document.addEventListener("DOMContentLoaded",loadImages,true);varimages=newArray(3),imageNums=0;functionloadImages(){for(vari=0;i<images.length;i++){images[i]=newImage();images[i].addEventListener("load",trackProcess,true);images[i].src="images/01.jpg";}}functiontrackProcess(){imageNums++;if(imageNums=images.length){drawImages();}}functiondrawImages(){varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");for(vari=0;i<images.length;i++){context.drawImage(images[i],200*i,0);}}

感谢各位的阅读！关于“在HTML5如何实现图片预加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！