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="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 图片预加载内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！