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跳转到APP指定页面的实现)
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- css弹出遮罩层页面不可滑动(Html5页面点击遮罩层背景关闭遮罩层)
- html5创作(HTML5录音实践总结Preact)
- html5加入图片(HTML5 图片预加载的示例代码)
- HTML5 <figure> 、<figcaption>标签
- html5怎么设置左边input(HTML5中input输入框默认提示文字向左向右移动的示例代码)
- html5应用的几个建议
- html5书写规范教学(Html5踩坑记之mandMobile使用小记)
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- vue加载html5动画(vue实现旋转木马动画)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
热门推荐
- 服务器虚拟化需要哪些技术(认识云服务器的虚拟化实现途径)
- linux后台运行程序的命令(在后台运行Linux命令的方法)
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- springboot内置tomcat启动过程(Tomcat启动springboot项目war包报错:启动子级时出错的问题)
- .NET中生成带Logo的二维码
- windows服务器安装宝塔面板(云服务器无法安装宝塔面板及软件解决方案)
- sqlserver中复合索引(浅析SQL Server 聚焦索引对非聚集索引的影响)
- textarea换行属性(处理textarea中的换行和空格)
- django框架基础之路由详解(详解Django中CBVClass Base Views模型源码分析)
- sqlifnull如何使用(在 SQL 语句中处理 NULL 值的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9