怎么在HTML5中实现一个图片预加载功能

这篇文章给大家介绍怎么在HTML5中实现一个图片预加载功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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

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

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

在执行drawImage操作，代码如下

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

或者使用<img>标签先加载图片

<img class="lazy" data-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].class="lazy" data-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中实现一个图片预加载功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。