<!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. AppStore新应用上传指南

    目录 [隐藏]  1 提交新应用前的准备工作 2 进入itunesconnect 3 提交新应用的信息 4 上传应用 5 用Application Loader上传应用 6 上传时出错的解决方案 6. ...

  2. [转]VS2010中水晶报表安装应用及实例

    基本分类如下:第一部分:VS2010简介VS2010是微软的提供的一套完整的开发环境,功能也是相当的大微软宣布了下一代开发工具和平台的正式名称,分别称为“Visual Studio Team Syst ...

  3. centos下安装ZooKeeper

    1.需求 安装ZooKeeper,metaQ 2.下载 http://zookeeper.apache.org/releases.html 当前stable版是zookeeper-3.4.6 3.解压 ...

  4. 【NS2仿真】TCP协议

    # # ftp # \ # tcp sink # \ / # n0--------5M 2ms---------n1 # # set ns [new Simulator] set f [open ou ...

  5. ServiceStack 介绍

    关于ServiceStack ServiceStack 官网介绍: Opensource .NET and Mono REST Web Services framework 什么是 ServiceSt ...

  6. Linux高级编程--08.线程概述

    线程 有的时候,我们需要在一个基础中同时运行多个控制流程.例如:一个图形界面的下载软件,在处理下载任务的同时,还必须响应界面的对任务的停止,删除等控制操作.这个时候就需要用到线程来实现并发操作. 和信 ...

  7. [Python] Keep efficient by vim in Pycharm

    From: http://blog.csdn.net/u013088062/article/details/50144201 From: http://blog.csdn.net/u013088062 ...

  8. IT人的自我导向型学习：学习的3个维度

    看到大家对我的文章赞了不少,看来大家还比较喜欢看.园子里的一些朋友和我说:”终于又看到你要在园子里发原创文章了.几年前就受益匪浅,经过几年的成长分享来的东西肯定也是精品.“ 感谢大家对我的信任,如果你 ...

  9. Hekaton是如何影响你数据库的目标恢复时间（RTO）的

    这个周末我发现了SQL Server 2014里Hekaton的一个有趣副作用,很遗憾它会负面影响你数据库的目标恢复时间(Recovery Time Objective,RTO).你已知道,对于每个本 ...

  10. 阅读《深入理解JavaScript定时机制》

    鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...