html5加入图片(HTML5 图片预加载的示例代码)
类别:Web前端 浏览量:900
时间:2021-10-11 00:14:06 html5加入图片
HTML5 图片预加载的示例代码在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 图片预加载内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5的新特性
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- 用html制作一个简易小游戏(Html5写一个简单的俄罗斯方块小游戏)
- webgl api 源码(基于 HTML5 WebGL 实现的医疗物流系统)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- HTML5面试题
- html5新增特性(总结html5自定义属性有哪些)
- html5循环及条件指令(html5实现滑块功能之type="range"属性)
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- html5 spellcheck属性
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- html5 video标签
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- 览邦G08 Plus SMART WATCH 测评⑱ 全独立这才是智能手表该有的样子(览邦G08PlusSMART)
- 荣耀手表 GS 3 真机亮相 不支持无线充电(荣耀手表GS3)
- 通过体温就能为智能手表充电 原来是用NASA在空间站用的黑科技(通过体温就能为智能手表充电)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
热门推荐
- mysql账户访问权限(MySQL 权限控制详解)
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- python算法图解(python实现kmp算法的实例代码)
- dedecms更新后设置空白(dedecms去掉当前位置栏目链接的方法)
- css中浮动的方式有几种方式(浅谈css中浮动和清除浮动带来的影响)
- elasticsearch数据写入原理(Python对ElasticSearch获取数据及操作)
- css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
- mongodb容器化部署映射端口访问(Docker 部署 MongoDB容器的方法)
- VS中生成与重新生成的区别
- phpstudy安装教程详解学习(phpstudy下载安装简明图文教程)