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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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
各种战术和打法的原创者
2020/03/04 星际争霸
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python如何执行系统命令
2020/09/23 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
python爬取youtube视频的示例代码
2021/03/03 Python
幼儿园新学期寄语
2014/01/18 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
音乐会主持人开场白
2015/05/28 职场文书
疾病证明书
2015/06/19 职场文书
小学数学教师研修日志
2015/11/13 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
MySQL日期时间函数知识汇总
2022/03/17 MySQL
pt-archiver 主键自增
2022/04/26 MySQL
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android