前端js页面加载完成时间ready与onload区别 执行顺序

ready()

执行时机:等待页面Dom树加载完成后,就开始执行。

在js文件中可以出现多个ready(),并且按照顺序执行。

document.ready = function(){};
//jq写法
$(document).ready(function () {});
//更精简
$(function(){});

onload()

执行时机:等待页面中的所有资源(包括图片、视频等资源)都加载完成后,才会执行。

而且在js中文件中只有一个onload事件。

window.onload = function(){};
//JQ写法
$(window).load(function(){})

标签上静态绑定onload事件

<body onload="test()">等待body加载完成,就会执行test()方法。

执行顺序

ready->onload->标签绑定onload。

因此同一个页面中ready要先执行,在动态页面加载后需触发模拟点击事件的话建议使用第一种onload,即资源全部加载完进行模拟点击。

模拟点击

$('#firstpage').trigger("click");
//或使用原生
var e = document.createEvent("MouseEvents");
    e.initEvent("click", true, true);
    document.getElementById("firstpage").dispatchEvent(e);
目录导航
  • ready()
  • onload()
  • 标签上静态绑定onload事件
  • 执行顺序
  • 模拟点击