首页常见问题正文

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

更新时间:2022-11-08 来源:黑马程序员 浏览量:

IT培训班

  在网页开发中,当通过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”。

分享到:
在线咨询 我要报名
和我们在线交谈!