[ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式

时间：2023-02-14 23:35:00
 <!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&comma;事件

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

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

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

  5. 使用 Babylon&period;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. Java 动态代理机制详解

    在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...

  2. Python学习笔记——元组

    1.创建一个元组并给它赋值 >>> aTuple = (123,'abc',4.56,['inner','tuple'],7-9j) >>> aTuple (123 ...

  3. 过渡transitioin

    一,什么是过渡(transition)? 1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡. 2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元 ...

  4. dojo&sol;io-query源码解析

    该模块主要对url中的query部分进行处理,我们发送GET请求时,将参数直接放在URL中,经常碰到的需求就是把一个对象转化为query字符串放到url中去发送GET请求.io-query模块便提供了 ...

  5. 系统升级日记（1）- 升级到SQL Server 2012

    最近一段时间在公司忙于将各类系统进行升级,其最主要的目标有两个,一个是将TFS2010升级到TFS2013,另外一个是将SharePoint 2010升级到SharePoint 2013.本记录旨在记 ...

  6. HDU 1576 A&sol;B【扩展欧几里德】

    设A/B=x,则A=Bx n=A%9973=A-9973*y=Bx-9973*y 用扩展欧几里德求解 #include<stdio.h> #include<string.h> ...

  7. System&period;getProperty

    我们可以通过System.getProperty("user.home")读取JAVA系统的user.home属性的值.

  8. Linux文件管理系统

    首先了解一般linux文件系统的构成. */usr/bin./bin : 存放所有用户可以执行的命令 */usr/sbin ./sbin :存放只有root可以执行的命令 */home : 用户缺省宿 ...

  9. Spark 资源调度及任务调度

    1.  资源分配 通过SparkSubmit进行提交应用后,首先会创建Client将应用程序(字节码文件.class)包装成Driver,并将其注册到Master.Master收到Client的注册请 ...

  10. 550 Create directory operation failed

    往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...

相关文章