BloggerAds廣告

相關文章

2012年11月29日 星期四

jquery .height() problem in chrome/safari

The evilness of Chrome is not less then IE

Thanks my workmate discovered a problem on chrome.
when i use $.height(), it works well on other browsers but Chrome and Safari,
which is webkit based browser

after google, findings below:
$(document).ready() means the DOM is fully loaded, but does not mean the graphics were loaded.
$(window).load() fires after$(document).ready() and all graphics were fully loaded.


here i made an experiment:
<html>
 <head>
  <title>event test</title>
  <script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script language="javascript" >
  
  //Run a function when the page is fully loaded including graphics.
  $(window).load(function(){
   var _imageHeight=$("img").height();
   $("ol").append("<li>window load, image's height is " + _imageHeight + "</li>");
  });
  
  //Specify a function to execute when the DOM is fully loaded.
  $(document).ready(function(){
   var _imageHeight=$("img").height();
   $("ol").append("<li>document ready, image's height is " + _imageHeight + "</li>");
  });
  </script>
 </head>
 <body>
  <ol></ol> <!-- use ordered list to show the call sequence -->
  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
 </body>
</html>
the above code tested with IE7, IE8, firefox 17, Maxthon 3, Chrome 23 & Safari 5.1.7

except chrome and safari, all other results below:
1.document ready, image's height is 53
2.window load, image's height is 53

and chrome and safari results:

1.document ready, image's height is 0
2.window load, image's height is 53

which shows $(window).load() fires after $(document).ready()
and webkit-based browsers (except Maxthon3)
cannot get the height since all graphics have not been loaded.

in summery, it is better using $(window).load() instead of $(document).ready()


2012年10月4日 星期四

load json crossdomain

Simply a note for loading json cross-domain

i use $.ajax() method for better event handling


client side js coding:
$.ajax({
 url:"http://another.domain.com",
 
 dataType: 'jsonp', //stand for "json-padding", it is jsonp, not json
 
 //its "jsonpCallback", not "jsonCallback". the callback method name from JSON, will explain below
 jsonpCallback: 'jsonCallback', 
 
 //set this to true to let the method know im loading data cross-domain
 crossDomain : true, 
 //success handler
 success: function(data) {
  console.log("dosomthing")
 },
 
 //error handler
 error: function() {
   console.log("error occured")
 }
});

the json response, wrap the JSON with a function with the name which declared in jsonpCallback above:
jsonCallback(
 {
  "user":"littleshell",
  "gender":"male"
 }
);

2012年3月7日 星期三

The 1009 error on Loader.load()

Just a note about 1009 error on Loader.load()
the situation is that the main.swf attempts to load child.swf

on Child class
package {

 import flash.events.Event;
 import flash.display.Sprite;

 public class Child extends Sprite {

  public function Child() {
   initChild();
  }
  
  public function initChild():void {
   stage.focus = this;
  }
 }
}
on Main class
package net.littleshell {
 import flash.display.Loader;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.net.URLRequest;
 
 public class Main extends Sprite {
  
  private var l:Loader
  
  public function Main() {
   init();
  }
  
  public function loadSWF($url:String):void {
   var rq:URLRequest = new URLRequest($url);
   l.load(rq);
  }
  
  private function init():void {
   initLoader();  
   loadSWF("child.swf");
  }
  
  private function initLoader():void {
   l = new Loader();
   l.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
   
   addChild(l);
  }
  
  private function loader_complete(e:Event):void {
   //blar blar blar
  }
 }
}
in such case, a #1009 error will be thrown in child.swf it is because child.swf references the stage object too soon.
to solve it, simply run your code when ADDED_TO_STAGE event was dispatched.

Modified Child class
package net.littleshell {

 import flash.events.Event;
 import flash.display.Sprite;

 public class Child extends Sprite {

  public function Child() {
   addEventListener(Event.ADDED_TO_STAGE, initChild);
   initChild();
  }
  
  public function initChild(e:Event == null):void {
   removeEventListener(Event.ADDED_TO_STAGE, initChild)
   
   //its now safe to do anything
   stage.focus = this;
  }
 }
}