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

ready()

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

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

在 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 事件
  • 执行顺序
  • 模拟点击
  • 目录
  • ready()
  • onload()
  • 标签上静态绑定 onload 事件
  • 执行顺序
  • 模拟点击
  • 手机扫描二维码访问

    本文标题:《前端 js 页面加载完成时间 ready 与 onload 区别 执行顺序》作者:极四维博客
    原文链接:https://cway.top/post/784.html
    特别注明外均为原创,转载请注明。

    分享到微信

    扫描二维码

    可在微信查看或分享至朋友圈。

    下一篇: Prettify代码高亮

    相关文章

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    «    2024年10月    »
    123456
    78910111213
    14151617181920
    21222324252627
    28293031

    搜索

    控制面板

    您好,欢迎到访网站!
      查看权限

    最新留言

    文章归档

    • 订阅本站的 RSS 2.0 新闻聚合