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实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
HTML中的表格元素介绍
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
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
javaScript语法总结
2016/11/25 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
js+css实现打字效果
2020/06/24 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python的UTC时间转换讲解
2019/02/26 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
学校课外活动总结
2014/05/08 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Python利用folium实现地图可视化
2021/05/23 Python