Web前端培训：页面加载事件怎么写

　　在网页开发中，当通过JavaScript代码操作DOM时候，如果JavaScript代码位于页面元素的上方，会因为页面元素还没有加载而执行失败。为了解决这个问题，便需要将这些代码包裹在onload事件的处理函数中，这样浏览器会在DOM加载完全后再执行JavaScript代码。

　　由于onload事件需要在页面的所有内容(包括DOM元素以及图片等文件)都加载完后才触发，为了提高网页的响应速度，jQuery中提供了ready事件作为页面加载事件，其功能类似于JavaScript的onload事件，区别在于ready事件只需页面的DOM元素加载完全后便可触发。ready事件的语法如下所示。

// 写法1
$(document).ready(function() {
    //页面加载后要执行的代码
});

//写法2
$(function() {
    //页面加载后要执行的代码
});

　上述语法中，document参数可以省略，由于写法2比较简洁，所以在实际开发中应用频率较高。

　　另外，与onload事件相比，ready事件的语法比较灵活。这是由于一个页面只能编写一个onload事件，并且只能执行一次;但是一个页面中可以包含多个ready事件，多个事件之间按照编写顺序依次执行。示例代码如下。

　　(1)一个页面编写多个onload事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

　　上述代码无法正确执行，执行结果只输出“text2”。

　　(2)一个页面编写多个ready事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

　　上述代码可以正确执行，在控制台中依次输出“text1”和“text2”。