在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 图片预加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
DevOps 代表开发和运营。 这是一种新的软件开发形式,彻底改变了软件产品的开发...
如题:高度已知,左右栏宽度300px,中间自适应: 弹性盒子本身就是并排的,我们...
尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 div class=”News...
时光荏苒,岁月如梭,还有整整六天,2013年就将成为历史。在这一年里,我们见到...
Dreamweaver中如何插入图像、图像占位符和互动图像 1、首先插入图像时,我们需要...
注 :目前比较流行的前端框架有Bootstrap、Foundation,这两都有着常用的网页设...
CSS中使用text-align、margin:0 auto居中 在使用 text-align 或者是 margin:0 ...
第一部分:基础知识 1.与:active 和 :hover这些伪类不一样,他们都是伪元素。 2....
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今...
最近刷脸支付很火,老板们当然要追赶时代潮流,于是就有了刷脸支付这个项目。前...