JavaScript 内容加载事件

window.onload

当一个文档完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。

 window.onload = function() {           
   alert();
}

$(document).ready()

会在 DOM 完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，绝不意味着所有关联的文件都已经下载完毕。
假设有一个页面，存在大量图片元素，这时我们使用window.onload，则必须等到所有图片都加载完毕之后才能执行。若使用$(document).ready()则在DOM就绪之后就可以执行，来更早的准备正确的部署，因为部分资源可能没有加载完毕，涉及到的属性可能无法访问。

 $(document).ready(function() {
   alert();
 });

document.ready()

用js实现，等同于$(document).ready()，在没有引入jQuery的情况下使用。
代码：

 (function() {
    var ie = !!(window.attachEvent && !window.opera);
    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
    var fn = [];
    var run = function() {
        for (var i = 0; i < fn.length; i++) fn[i]();
    };
    var d = document;
    d.ready = function(f) {
        if (!ie && !wk && d.addEventListener)
            return d.addEventListener('DOMContentLoaded', f, false);
        if (fn.push(f) > 1) return;
        if (ie)
            (function() {
                try {
                    d.documentElement.doScroll('left');
                    run();
                } catch (err) {
                    setTimeout(arguments.callee, 0);
                }
            })();
        else if (wk)
            var t = setInterval(function() {
                if (/^(loaded|complete)$/.test(d.readyState))
                    clearInterval(t), run();
            }, 0);
    };
})();

document.ready(function(){
   alert('Document is ready!');
});