HTML5 图片预加载的示例代码


Posted in HTML / CSS onMarch 25, 2020

在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 图片预加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 #HTML / CSS
html5视频常用API接口的实战示例
Mar 20 #HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 #HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 #HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 #HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 #HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 #HTML / CSS
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php链表用法实例分析
2015/07/09 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
Python 的 Socket 编程
2015/03/24 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
财政局长自荐信范文
2013/12/22 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
白血病募捐倡议书
2014/05/14 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
python三子棋游戏
2022/05/04 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技