前端 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代码高亮

      相关文章

      发表评论:

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

      «    2025年5月    »
      1234
      567891011
      12131415161718
      19202122232425
      262728293031

      搜索

      控制面板

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

      最新留言

      文章归档

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