您现在的位置是:网站首页> 编程资料编程资料

HTML5 图片预加载的示例代码在HTML里加载摄像头的方法基于HTML代码实现图片碎片化加载功能html5用video标签流式加载的实现传统HTML页面实现模块化加载的方法HTML页面缩小后显示滚动条的示例代码h5页面背景图很长要有滚动条滑动效果的实现HTML5实现直播间评论滚动效果的代码html+css实现滚动到元素位置显示加载动画效果

2023-10-11 322人已围观

简介 这篇文章主要介绍了HTML5 图片预加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下:

 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = new Image(); image.src = "images/01.jpg"; context.drawImage(image, 0, 0); 

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

在执行drawImage操作,代码如下

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

或者使用标签先加载图片

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

 var image = document.getElementById('image'); 

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

 document.addEventListener("DOMContentLoaded", loadImages, true); var images = new Array(3), imageNums = 0; function loadImages() { for (var i = 0; i < images.length; i++) { images[i] = new Image(); images[i].addEventListener("load", trackProcess, true); images[i].src = "images/01.jpg"; } } function trackProcess() { imageNums++; if (imageNums = images.length) { drawImages(); } } function drawImages() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); for (var i = 0; i < images.length; i++) { context.drawImage(images[i], 200 * i, 0); } }

参考文章: Preloading Images

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

相关内容

-六神源码网