JS执行与页面加载

最新推荐文章于 2023-05-17 15:10:34 发布
最新推荐文章于 2023-05-17 15:10:34 发布
阅读量297 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/knijiokm/article/details/60961488
版权

序言

我是在CSDN的技术问答中看到“JS中有没有jquery.ready这样的方法”这个问题后，再看到两篇不错的文章：

深入分析jQuery的ready函数是如何工作的(工作原理)
jquery $(document).ready() 与window.onload的区别

以下是我结合问题及这两篇文章的相关性进行简单的编写：

内容

JS中定义的事件
window.onload或者在<body>标签中注入：onload="fn()"

整个文档中只能定义 1 个，且其中定义的方法在DOM、图片、Flash等媒体加载完之后才执行

Jquery中定义的事件

注：Jquery中定义的事件，整个文档中能定义 N 个，并按顺序执行。

$(window).load(function() {});

其中定义的方法在DOM、图片、Flash等媒体加载完之后才执行

$(document).ready(function(){}); 

简化写法：$(function(){});

其中定义的方法在DOM加载之后执行，无需等待图片等附件加载完之后才执行

load特殊情况

由于JQuery在封装JS中的判断，导致在嵌入frame的IE中，先执行嵌入frame再执行当前文档的onload.

两只小蚂蚁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
script的加载和执行
我欲乘风破浪
01-05 1319
script的加载和执行 脚本的位置 JavaScript代码的下载和执行是阻塞其他文件的下载的 如果把script标签放到head中，那么，假设需要加载三个js文件和一个css文件，那么运行图就是， 如果把script标签放到前面：我们知道HTML的渲染是从上至下的，当把所有的HTML渲染完成之后，但是在用户打开时能够看到页面时有基本的HTML内容的，只是可能暂时不能完成交互，这样是能够留...
JS页面加载完毕后执行的多种方式和比较
热门推荐
yjclsx的博客
07-31 43万+
做项目的时候可能会遇到这种情况: 一个页面的<body>中定义了多个onload事件,那么在此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象. 有的朋友肯定会说用jQuery的$(document).ready(function(){})(它的另外两种写法：$(document).ready(function(){})和$(function(){})
如何让页面加载js之后，在显示页面
lhrcylhr的博客
08-11 875
onload加载完在执行 你可以开始给body一个display:none 然后加载完后再显示 onload=function(){ $('body').css('display','block') } window.onload = function(){ $('body').css('display','block') }
vue项目中main.js使用方法详解
05-17 7204
/ 引入组件// 定义 Loading 对象// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。// 导出就算没用独立引用sayHello和sayWorld这两个组件，它俩依然可以被全局使用。Vue.use()的作用就是让它里面被注册的组件能够被全局使用。axios为什么不需要用就能直接使用？axios 内部并没有提供相应的组件供用户全局使用，开发者在封装axios时，根本就没有配置install。
实现在html页面显示之前执行js方法
黑白门
04-01 2万+
第一种方式是把方法写在head中(推荐) 第二种方式是使用body的onload方法 第三种方式是使用$(document).ready()
js中页面加载完成立即执行函数的写法
做一个有知识的人的博客
12-04 1万+
一.javascript 1.直接在标签里写 &lt;body onload="func()"&gt;&lt;/body&gt; 2.js中window.onload调用    //整个window加载完成后执行 function func(){ /* window.onload调用*/ } window.onload=func //不要括号 window.onload=f...
Jquery和js的页面加载完成执行的几种方式和区别
menghuanzhiming的博客
02-09 951
$(window).load()、window.onload=function(){}和$(document).ready()（$(function() {})）的区别 1.执行时间 $(window).load() 是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行； window.onload=function(){} 是页面中的所有元素（包括图片、flash）等都加载...
JavaScript实现当网页加载完成后执行指定函数的方法
10-24
网页的加载涉及HTML文档结构的解析、CSS样式的加载与应用、JavaScript脚本的下载与执行，以及图片、视频等其他资源的加载。当这些内容全部就绪，浏览器会触发“load”事件。通过监听这个事件，开发者可以执行在页面...
如何让页面加载完成后执行js
10-27
页面加载完成后执行JavaScript代码是前端开发中常见的需求，主要目的是保证在执行JavaScript操作之前页面的DOM结构已经完全加载完毕，这样可以避免因DOM元素尚未加载完毕而导致的脚本错误。下面我将详细介绍如何让...
Javascript代码在页面加载时的执行顺序介绍
10-27
在探讨JavaScript代码在网页加载过程中的执行顺序时，我们首先需要了解JavaScript在HTML文档中的几种嵌入方式，以及它们在页面加载过程中的执行行为。 一、HTML中嵌入JavaScript的方法 1. 直接将JavaScript代码...
多种方法实现当jsp页面完全加载完成后执行一个js函数
10-26
在网页开发中，有时我们需要确保页面完全加载后再执行某些JavaScript函数，这有助于保证操作的正确性和用户体验。在JSP页面中，实现这个需求有多种方式。以下将详细讲解标题和描述中提到的几种常见方法： 1. **使用...
探析浏览器执行JavaScript脚本加载与代码执行顺序
10-22
浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环，因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念：JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...
react 页面加载完成后自动执行标签的点击事件
jjw_zyfx的博客
05-09 1万+
当刚进入页面时react并没有自动加载路由,因为没有设置只是设置了key,所以并没有加载 用到了ant design的layout组件,代码设置如下: 第一种操作dom的方法: 但是想让页面加载完成后自动点击link这个标签,然后加载home的组件,方法有这么几种: componentDidMount() { if (window.location.hash.split('/')[...
页面自动执行（加载）js的几种方法
yuanxun05的专栏
04-16 1223
一、JS方法 1.最简单的调用方式，直接写到html的body标签里面： 1 2 body onload="myfunction()"> html> body onload="func1();func2();func3();"> body> html> 2.在JS语句调用： 1
页面加载后就执行一个js函数
yin__ren的博客
10-05 8991
function myfun() { alert("this window.onload"); } 方法一： body onload="myfunction()"> 方法二： function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号
JS实用脚本--页面加载完毕后执行函数
小Z的部落格
10-20 1675
JS实用脚本--页面加载完毕后执行函数
JS脚本按顺序依次加载执行
izwell的博客
11-21 1926
今天同事遇到一个需求，就是需要动态加载的脚本按顺序依次加载执行。尝试了使用document.write(DOMContentLoaded之后不能使用该方法，且该方法不推荐使用)，使用defer=“async”(部分浏览器比较古老，不支持该属性)。最后我写了一个方法，实现脚本的按顺序加载，代码如下： function loadScript(){ var scriptArr = Array.pro...
js实现页面加载完成执行函数
weixin_42739916的博客
03-04 2316
//本demo为当页面加载完成后执行任务，再退出定时执行方法的状态 var interval = setInterval(function(){ //获取当前页面状态 var status = document.readyState; if(status=="complete"){ //当前页面加载完毕后执行 //设置制度目录树的选...
机器学习模型评估与优化：常用方法与实践技巧.md
最新发布
08-15
机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器
JavaScript脚本执行时间与文档加载关系解析
书中强调，理解和掌握脚本执行时间对于优化网页性能、避免意外的页面重写以及提供流畅的用户体验至关重要。通过学习这些知识，开发者能够编写出更加高效、响应迅速的Web应用。同时，书中提供的示例代码和实践指导...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值