css图片预加载,html5添加图片代码

　　在HTML5中，我们可以使用绘图图像方法在帆布上进行画图操作，其基本代码如下：

　　var canvas=文档。getelementbyid(“canvas”)；var context=画布。获取上下文(“2d”)；var Image=new Image()；形象。src= images/01。jpg ；context.drawImage(image，0，0)；不过我们会发现这样写是无法显示出图片的，因为图片并没有加载完全，我们就调用了绘图图像方法，我们可以使用图片的装载方法，使图片加载完全后

　　在执行绘图图像操作，代码如下

　　var Image=new Image()；形象。src= images/01。jpg ；形象。onload=function(){ context。绘制图像(image，0，0)；}或者使用图片标签先加载图片

　　img src= images/01。jpg style= display:none id= image 然后使用的元素来获得图片对象

　　var image=文档。getelementbyid(“image”)；但是在图片较多的情况下，使用上面两种方式都不是太优雅，我们可以使用下面的方法，等待所有图片加载完全后，再执行其他操作

　　文档。addevent侦听器( DOMContentLoaded ，loadImages，true)；var images=new Array(3)，imageNums=0；函数loadImages(){ for(var I=0；我图像。长度；I){ images[I]=new Image()；图像[我].addEventListener(load ，trackProcess，true)；图像[我].src= images/01。jpg ；} }函数track process(){ imageNums；if(imageNums=images。长度){ draw images()；} }函数绘制图像(){ var canvas=document。getelementbyid(“canvas”)；var context=画布。获取上下文(“2d”)；for(var I=0；我图像。长度；i ) { context.drawImage(images[i]，200 * i，0)；}}参考文章：预加载图像

　　到此这篇关于HTML5图片预加载的示例代码的文章就介绍到这了，更多相关HTML5图片预加载内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。