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原生拖拽相关事件简介以及基础实现)
- html5开发图片(HTML5开发动态音频图的实现)
- html5功能讲解(Html5定位终极解决方案)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- 只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
- h5实现弹出悬浮窗(Html5监听手机摇一摇事件的实现)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5创作(HTML5录音实践总结Preact)
- html5自动静音(html5录音功能实战示例)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- css弹出遮罩层页面不可滑动(Html5页面点击遮罩层背景关闭遮罩层)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
热门推荐
- 如何有效的限制上传文件类型
- iis服务器的配置(win7下配置使用IIS搭建自己的WEB服务器)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- laravel数据返回格式(laravel 关联关系遍历数组的例子)
- h5实现唤起本地app(h5页面唤起app如果没安装就跳转下载iOS和Android)
- 计算引擎flink(浅谈实时计算框架Flink集群搭建与运行机制)
- SQL Server中@@ROWCOUNT的用法
- dedecmsv6如何安装(dedecms 下载地址加迅雷专用链的操作方法 比较全)
- php依赖注入和控制反转的区别(php反射学习之依赖注入示例)
- sql server 2012 错误5123(SQL SERVER 9003错误解决方法)