摄氏零度以后...

原帖：http://www.blueidea.com/tech/web/2009/7024.asp

var iframe = document.createElement("iframe");
iframe.src = http://www.planabc.net;
if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}
document.body.appendChild(iframe);

原文地址：http://www.planabc.net/2008/10/31/javascript_ready_onload/

在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？

我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况（一般为 loading 、loaded、interactive、complete），当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。

对于 readyState 状态需要一个补充说明：

1. 在 interactive 状态下，用户可以参与互动。
2. Opera 其实也支持 js.onreadystatechange，但他的状态和 IE 的有很大差别。

具体实现代码如下：

function include_js(file) {
    var _doc = document.getElementsByTagName('head')[0];    
    var js = document.createElement('script');    
    js.setAttribute('type', 'text/javascript');    
    js.setAttribute('src', file);    
    _doc.appendChild(js);    
    
    if (!/*@cc_on!@*/0) { //if not IE        
        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
        js.onload = function () {            
            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');       
        }    
    } 
    else {        
        //IE6、IE7 support js.onreadystatechange        
        js.onreadystatechange = function () {            
            if (js.readyState == 'loaded' || js.readyState == 'complete') {                
                alert('IE6、IE7 support js.onreadystatechange'); 
            }        
        }    
    }    
    return false;
}
        
//execution function
include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

以前我还真不知道image对象可以这样用的，唉～～out了！

JS代码如下：

function getFileSize(filePath){     
    var image=new Image();     
    image.dynsrc=filePath;     
    alert(image.fileSize);     
}

调试：

<input name="file" size="30" type="file" onchange="getFileSize(this.value)" />

原文：http://blog.csdn.net/KimSoft/archive/2009/01/08/3733628.aspx

Jacob Seidelin 在他的博客中写道：

“2008年真是太棒了，不仅仅是因为很多厉害的人物在使用JavaScript和新的canvans元素，浏览器厂商也在竞争，试图超越对方在JavaScript方面的表现，这都证明了JavaScript的重要性。以下是我的总结：

Games

对于JavaScript游戏来说这一年很伟大。使用DHTML和基于Canvas的游戏似乎有能力来接管Flash的一些领域。许多经典的游戏都被重新的设计：Super Mario , Pac-Man （YUI pacman：很酷的YUI JavaScript库游戏）, Breakout , Space Invaders , Bomberman 和 T&C Surf Designs 。

还有很多在经典的旧游戏上加入了他们的新思想：Matt Hackett创作的 Spacius , Mark Wilcox 创作的 Invaders from Mars , VertigoProject创作的 RedLine Racing 和 Tetris game 。

我们甚至还看到了一些角色扮演的游戏：Andrew Wooldridge创造的Tombs of Asciiroth 和 CanvasQuest ，Pierre Chassaing创造的ProtoRPG。 虽然他们大多数都只是试用版或演示，但是我相信有一天他们会变的相当的酷。

2008年还出现了一些有趣的JavaScript / DHTML游戏库，最突出的就是GameJs （GameJS：超酷的Canvas游戏库）和GameQuery ，后者为jQuery库的扩展。

最后这个很特别， DEFENDER of the favicon，它将旧游戏Defender压缩到了只有16x16的空间。

Demos

越来越多的浏览器开始支持canvas元素，也就是说，在绘制动态图形方面我们又多了一种选择。有人制作出了一个小型简单的演示 ，用于展示Canavs的能力，但是有些人在这个基础上又向前迈了一步，就像 Matt Westcott制作的Antisocial demo 。

今年的大忙人Mathieu 'p01' Henri制作了很多小应用，使用一行代码就能做相当酷的事：Rubber effect ，Tunnex ，Mars ，他们都在256个字节以内！

Mathieu Henri 利用canvas元素，在20 lines 比赛 中创造出了惊人的效果： Dynamic Hypnoglow ，Twinkle 和 Hypno Trip Down the Fractal Rug 。这次比赛的优秀作品还有：colliding balls ，3D cube effect 和 dynamically generated BMP flames 。

Asylum inmates在20-line games的比赛中创建了：Lunar Lander ，a Boulderdash clone ，Wolfenstein 3D 。

3D

canvas元素只支持2D图像，但是这并不代表他不能制作出3D的效果：basic 3D cubes , texturing experiments ， JavaScript/Canvas 3D engines（很酷的 3D Canvas 演示）。还有许多3D的东西在Nihilogic上。

Emulation

Matt Westcott创造的JSSpeccy the ZX Spectrum emulator 。
James Urquhart 创造的SCUMM interpreter 。

我个人最喜欢的是JavaScript AGI interpreter。

Graphics

最令人印象深刻的是John Resig将Processing语言加入JavaScript-Processing.js  ，Aza Raskin创建了Algorithm Ink。Eitan Suez将Turtle，字符串图像变成工具转换成JavaScript版，TurtleJS 。

Audio

Cameron Adams 创建了一个有趣的JavaScript实例：JS-909 （JS-909：一个不使用Flash的有趣打鼓机器），这是一个打鼓机器，能够演奏声音而不使用Flash，也不使用任何库，声音由标签引入。
sk89q 创造的sine waveform generator ，动态生成和播放WAV文件。

其他

你能使用CSS做些什么了？是不是只是为了您的文字样式？显然不是，Román Cortés证明了这一点，他创造一个 Simpson的形象 ，但这需要你拥有足够的CSS技巧。另外，Ernest Delgado 提供了一个汽车导航的演示 （canvas：驾驶导航）。

最后一个类似于我们小时候玩的积木，Cubescape ，可选择不同的颜色。

我在此许愿，希望2009年的javaScript能更酷！”

原文：https://developer.mozilla.org/en/Canvas_tutorial/Using_images 

Canvas另一大运用就是可以对图片进行二次创作或修改。貌似这个是目前唯一一个办法可以动态的往图片上加字的方法^o^。图片的格式可以是任意一种Gecko浏览器支持的格式，并且在同一页面上的其他canvas竟然也可以作为源来引用。

Importing images

图片的导入需要2个步骤：

• 首先，我们需要一个javaScript中的image对象或者另一个canvas对象最为源，而不是简单的提供一个图片地址就可以的。
• 其次，我们需要采用drawImage方法在canvas上绘制图形。

我们先来看下第一个步骤，会有4种基本选项供运用：

利用同一页面上的图片
我们可以利用document.images，document.getElementsByTagName，document.getElementById等方法获取同一页面上的图片对象。

利用其它canvas对象
我们可以用document.getElementsByTagName，document.getElementById等方法获取canva对象，不过请先确保你需要获取的canvas对象中已有绘制内容。

用脚本创建一个图形对象
另一个方法就是用脚本创建一个image对象。不过此举最大的缺点就是脚本会等待图片对象完全载入后才会handle接下来的脚本，而在途中我们无法让它停止图片的loading。

  1. var img = new Image();   // Create new Image object  
   2. img.src = 'myImage.png'; // Set source path  

当脚本执行时，图片便开始loading，如果当执行drawImage方法时图片仍未停止loading，脚本便会暂停执行直至图片载入完成。如果你不想让此情形发生，我们可以利用以下的onload事件来handle：

  1. var img = new Image();   // Create new Image object  
   2. img.onload = function(){  
   3.   // execute drawImage statements here  
   4. }  
   5. img.src = 'myImage.png'; // Set source path  

用data:url方式引用图片
还有一种对图片的引用方式为data:url。它允许你用一个Base64编码的描述字符串来定义图片。用data urls的一个好处就是图片会在你的界面立即显示而无需去server上下载（或许另一个好处就是我们可以把HTML/JS/CSS/IMAGE都集成在一个文件中^o^），当然，此方式不好的地方也显而易见：如果图片的尺寸过大的话，这个描述字符串也会非常之长哦～～。