在HTML5如何实现图片预加载

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

基本代码如下：

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

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