<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #000;

 }

 #can {

     display: block; margin: 25px auto;border-radius: 2px;background:#FFF;

 }

 </style>

 <script type='text/javascript'>

     $( function(){

         var can = $('#can').get(0);

         var oCan = can.getContext('2d');

         var oImg = $('#img').get(0);

         /*

             图片预加载的方式:

                 在W3C HTML Image DOM 中当美使用一个<img/>标签时系统自动创建一个new Image()对象,这个对象包含诸多属性和时间其中可以为我们实现图片预加载的属性和事件

                 包括:

                     属性 :

                         complete

                         readyState : complete loading

                         onerror:

                         onload

          */

          if(oImg.complete == 'true' || oImg.readyState == 'complete' || oImg.readyState == 'loading'){

              drawImage();

          }else{

              oImg.onload = drawImage ;

          }

          function drawImage(){

              /*

                  javascript demo code ...

               */

          }

     } );

 </script>

 </head>

 <body>

     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器版本以获取更好的用户体验...</canvas>

     <img src = './images/demo.jpg'/>

 </body>

 </html>

[ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式的更多相关文章

  1. 深入理解DOM事件类型系列第六篇——加载事件

    前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...

  2. JavaScript DOM编程基础精华02（window对象的属性，事件中的this，动态创建DOM，innerText和innerHTML）

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  3. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  4. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  5. 使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

  6. JavaScript的DOM对象

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  7. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  8. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  9. 【总结整理】JavaScript的DOM事件学习（慕课网）

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  10. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

随机推荐

  1. SVN分支与合并

    分支的基本概念就正如它的名字,开发的一条线独立于另一条线,如果回顾历史,可以发现两条线分享共同的历史,一个分支总是从一个备份开始的,从那里开始,发展自己独有的历史(如下图所示) ⑴创建分支 假设目前我 ...

  2. 图文详解远程部署ASP.NET MVC 5项目 [转载]

    话外篇: 由于感觉自己的机器比较慢,配置不好,所以最近想把之前的项目部署到实验室的服务器上,但是由于常不在实验室,所以在想能不能远程部署.因此今天专门研究了一下具体的过程,下面和大家分享一下.本人新手 ...

  3. get新技能： 如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。 例如设置宽高比16:9。

    设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...

  4. Tips12: 私人定制 专属的Unity3D 脚本模板

    在使用U3D的过程中,新建一个C#脚本,它包含着空的Start()和Update()函数.  根据个人习惯的不同,可能有些人有着自己的脚本风格,每次进去都增删改很麻烦,这里介绍一个更改新建脚本模板的方 ...

  5. 用live writer写博客

    一.软件准备: 最新版的是Windows Live Writer 2012,但是不提供单独的安装包,它是和微软其它软件一起的(包括MSN.Window Move Maker等),软件大小为131M,官 ...

  6. Hadoop入门进阶课程3--Hadoop2.X64位环境搭建

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  7. 免费下载：用于原型设计的 iOS 7 线框图

    André Revin 使用 Illustrator 创建 iOS7 iPhone 5 的样机原型.这是一个像素完美的线框样机,可以帮助超级轻松的打造你的原型.你可以免费下载源文件,并在工作中使用. ...

  8. E:无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系

    安装terminator等一些软件等时候,遇到了这样等问题 leo@leo:~$ sudo apt-get install terminator [sudo] password for leo: 正在 ...

  9. Sprint总结

    # Sprint 1 总结 > Sprint 1 主要是界面设计 > 为了遵循Material design,实际操作中依然遇到许多困难 > 预计耗时两小时每天,但是因为网络问题工作 ...

  10. 实现java 中 list集合中有几十万条数据,每100条为一组取出

    解决"java 中 list集合中有几十万条数据,每100条为一组取出来如何实现,求代码!!!"的问题. 具体解决方案如下: /** * 实现java 中 list集合中有几十万条 ...