In my last post, I mentioned a way to resolve fire javascript function after layout (the dom) is ready but before images were downloaded. I mean, "sometimes it is too late to use window.onload to fire js".

But the solution is sometime incorrectly using for resolve the problem.
In case of document.readyState is "interactive", the page must be refreshed. So if you newly navigated to a page, the readtState never be "interactive".
And after a deeply test of "complete" status, it has some behavior as window.onload.

Dean has a solution, it is smart and cross-browser(IE,Mozilla,Opera,Safari).
http://dean.edwards.name/weblog/2005/02/order-of-events/
I Traced the post above, read all the comments and finally got a perfect solution:


// Dean Edwards/Matthias Miller/John Resig

function init() {
// quit if this function has already been called
if (arguments.callee.done) return;

// flag this function so we don't do the same thing twice
arguments.callee.done = true;

// kill the timer
if (_timer) clearInterval(_timer);

// do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loadedcomplete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;

Labels: coding, javascript

Dynamic image resizing is a useful functionality for forums and blogs, it widely spread and be used by many web-based systems.

Quchao.com posted a self-used images resizing encapsulation which I look deep into it and found massive improvable spaces.

http://www.quchao.com/entry/my-resizeimgs-func/#comment-3148

function resizeImgs() {
if (!document.getElementsByTagName) {
return;
}
var defaultWidth = 400; // Defualt value for the images to be resized
var imgs = document.getElementsByTagName('img');
var imgsLen = imgs.length;
for (var i = 0; i < resize =" imgs[i].getAttribute('resize'))" width =" resize;" width =" defaultWidth;">

//Sorry, currently Chinese only. I will update this to English soon.
遍历的话使用
for 在"杀猫贴"中会导致IE假死,解决的办法是使用 setTimeout来做,
但是setTimeout最小值只能为10,速度太慢.

而对于image完全可以使用document.images来定位,而不必遍历所有的ELEMENT,速度会快很多.

如果使用

for (var i = 0 ; i < document.images[document.images.length]; i++){
document.images....
}
放在文档的最后去做的话,速度会快很多,而且不需要window.onload
图片也可以在第一时间设置为指定大小.
但该方法不能很好够unobtrusively的形式对功能进行封装,因为无法确定最后使用者也能够正确的将Script放在document的最后,而且不够灵活.

要解决这个问题,就必须使用到document.onreadystatechange
当页面LAYOUT完成而图片未加载是,就开始执行JS代码
document.onreadystatechange = function(){
if (document.readyState == "interactive"){
alert(document.images[document.images.length -1].readyState);
}

Labels: coding, javascript

Generally it is impossible but some guy done that with a informal way

<Script>
var varx = {
addChild: function Wlc_Framework_UI_UIGroup$addChild(child) {
var x = "hello dfsalkfj kasfj"
}
}
var pat = /[\(\{\n\r].*?[\)\}\n\r]/g


try {
alert(varx.addChild.toString().replace(pat,""))
}catch(ex){alert(ex.message);}

</script>

Labels: coding, javascript

The Data URL scheme (RFC at http://www.ietf.org/rfc/rfc2397.txt ) You can deliver the image as base64 encoded string with your XMLHTTP or payload. You’d do segregate textual data and image data part using XML of JSON. Then set the SRC attribute with your encoded data, here’s an example that works with Firefox.


<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" alt="Larry" />



Preview: only work in firefox

Labels: coding, javascript

This precious technique is researched & developed by Marcus Granado
Refer to http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html

Request binary stream in FF

load_url = function(url) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
var req = new XMLHttpRequest();
req.open('GET',url,false);
//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
return req.responseText;
}

Comments refer to working in IE

At 9/14/2006 9:50 AM , Ben said...
This sounds like a great way to fix this problem but unfortunately it doesn't seem to work in IE. I'm trying to preload images using this method but the Microsoft.XMLHTTP implementation of XmlHttpRequest unfortunately doesn't include overrideMimeType. I've tried to use req.setRequestHeader('Accept','text/plain; charset=x-user-defined') but this doesn't work either.

Any help would be greatly appreciated :)


At 9/14/2006 11:00 AM , Marcus Granado said...
Hi, Ben. I developed the technique above to work on Mozilla/Firefox, but I didn't test on IE or any other browser (BTW, IE understands x-user-defined charset). It would be interesting if you could sniff the http headers being sent by IE after using setRequestHeader() as you suggested, to see if the headers are really being modified and compare with the output of FF. You might also want to set the headers 'accept-charset' and 'content-type' to the charset/mimetype above and have a try.

Further, IE seems to be able to natively read binary raw bytes by reading the property 'XHR.responseStream', which FF lacks. Have e.g. a look here, here and
here.
Let me know if any of the above works.

Labels: coding, javascript

When we coding Object-oriented javascript, we simply add 'this' as a prefix before a variable to simulate a property.

It is very simple when we use it in sustained coding:

a = function(){
this.b = 0;
}
alert(new a().b)

Quite simple and also leak of functionality, I mean, it only pass a value which we set in previous code and the problem is how we use it to return a various value by a funtion?

Here is the solution:

When we called a variable in javascript, the script engine first call toString function to see if it is defined and returnable, if it is, return the value of toString.

So the code here should be likes this:

a = function() {

}
a.prototype.b = function(){
return 2;
}
a.prototype.b.toString = function(){
return this.call();
//The 'this' make me a little confused, it doesn't point to the instance we created.
}
//this line added in 4/30/2007
a.prototype.b.valueOf = a.prototype.b.toString;

Then, we can simply use this.b instead of this.b() and then it will return the value of function b.

alert(new a().b);

Labels: coding, javascript