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

2020/09/30 13:20 Web 极四维博客 543 0
😂 这篇文章最后更新于1297天前，您需要注意相关的内容是否还可用。
目录导航
  • ready()
  • onload()
  • 标签上静态绑定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);

    声明：本文由极四维博客发布，如需转载请注明出处。