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); }

可能行使<img>标签先加载图片

<img src=http://www.jb51.net/html5/"images/01.jpg" style="display: none" id="image">

然后行使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 图片预加载内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!