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实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
SQL中where和having的区别
2012/06/17 面试题
优秀教师主要事迹
2014/02/01 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
人事专员岗位说明书
2014/07/29 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
装修公司管理制度
2015/08/05 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android