昨天zchiy2k问 我关于 jQuery 如何分别处理DOM加载完成和文档加载完成的问题,我一时没回答上来,因为在开发中我还真是从来没有处理过等待页面所有内容加载完毕才执行的情况。其实 jQuery 中处理文档加载完毕就是用的平时非常常用的 load 事件,只不过监听 window。今天整理了一下,顺便鄙视下自己做前端开发那么久连这个都还不知道。
页面完全加载是指页面上所有内容完全加载,包括窗口,框架,对象和图像等等,在 jQuery 中通过监听 window 的 load 事件达到这一目的。这个事件会延迟 JavaScript 代码执行的时间,因为页面中可能包含大量的图像,甚至 Flash。
$(window).load(function(){ alert('页面加载完毕'); });
如果没有使用库进行开发,那么用原生 JavaScript 监听这个事件也是非常简单的事情:
window.onload = function(){ alert('页面加载完毕'); }
而最通常的做法是在 Dom 构建完成的时候执行 JavaScript 代码,这样可以再保证代码在页面元素完整的前提下尽早地被执行,ready 函数可能是大多数学习过 jQuery 的人的第一堂课。
$(document).ready(function(){ alert('DOM加载完毕'); }); // 通常我们这样偷懒: $(function(){ alert('DOM加载完毕'); });
对于打算使用原生 JavaScript 进行开发的盆友们来说,domReady 是一个非常严谨、可靠的检查 DOM 是否准备就绪的微型 Library。
转自:http://www.jsmix.com/javascript/document-ready-window-load.html