JS实现文档加载完成后执行代码

最新推荐文章于 2024-08-20 04:37:55 发布
最新推荐文章于 2024-08-20 04:37:55 发布
阅读量788 收藏
点赞数
分类专栏： javascript 文章标签： JavaScript DOM加载 window.onload 事件处理 代码执行
原文链接：https://www.jb51.net/article/69191.htm
版权

本文给大家讲述的是使用javascript实现文档加载完成后再执行代码的方法和示例，非常简单实用，有需要的小伙伴可以参考下。

在执行某些操作的时候，需要当文档完全加载完成之后再去执行，否则可能出现意向不到的情况，先看一段代码实例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>脚本之家</title>

<style type="text/css">

div{

 width:200px;

 height:200px;

}

</style>

<script type="text/javascript">

document.getElementById("mytest").style.backgroundColor="#639";

</script>

</head>

<body>

<div id="mytest"></div>

</body>

</html>

以上代码的初衷是将div的背景颜色设置为#639，但是并未达到我们预期的效果，这是因为文档加载的时候代码是顺序执行的，当执行js的设置背景颜色代码的时候，还没有加载到指定的div，所以js语句根本没有获取到对象。代码修改如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<title>脚本之家</title>

<style type="text/css">

div{

 width:200px;

 height:200px;

}

</style>

<script type="text/javascript">

window.onload=function(){

 document.getElementById("mytest").style.backgroundColor="#639";

}

</script>

</head>

<body>

<div id="mytest"></div>

</body>

</html>

以上代码实现了预期的效果，这是因为将代码放到了一个函数中，而此函数用作了window.onload事件的事件处理函数。window.onload事件触发的条件是当前文档完全加载完成，当此事件被触发之后，就会执行它的事件处理函数，这样因为所有文档都已加载了，就不存在js语句无法获得对象的情况了。

以上所述就是本文的全部内容了，希望大家能够喜欢。

firstcode666
关注
专栏目录
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
在JavaScript中，我们通常使用`window.onload`事件来等待整个页面包括所有资源（如图片、脚本等）加载完毕后执行代码。然而，有时我们只需要在DOM（文档对象模型）结构构建完成后，而不是等待所有资源加载完就执行...
JS：文档的加载
F_aF_a的博客
12-29 158
浏览器加载一个页面时，自上而下顺序加载 读取一行运行一行，如果将script标签写在页面的上边，在页面执行的时候，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到对象 onload事件会在整个页面加载完成之后才触发 为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM已经加载完成了 &lt...
JavaScript使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖
ITCBL
05-03 338
JavaScript使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <...
javascript 等待文档加载完成
最新发布
weixin_42515990的博客
08-20 66
我整理的一些关于【Java】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/bLN8S1JavaScript 等待文档加载完成 在网页开发中，JavaScript 是一个非常重要的部分。我们常常需要在文档加载完成后执行某些脚本，以保证用户能够顺利地看到所有内容并与之交互。本文...
文档加载完成自动调用Js中的方法
IVera_Jing的博客
12-14 497
步骤1 在body中用onload: 步骤2 在脚本中用window.onload: function myfunction() {     alert("this window.onload"); } /*用window.onload调用myfunction()*/ window.onload=myfunction;//不要括号
uniapp 等图片文件全部上传成功后，再继续执行js代码（图片压缩，同步上传）
leaf的博客
08-23 2164
uniapp 等图片文件全部上传成功后，再继续执行js代码 起因 前几天在写一个简单表单提交的时候，遇到了一个文件上传的问题。这个表单，需要上传三类图片，而且每一类都是可以多张上传的。 使用文件上传的组件，一般都是选择图片后，他就会自动进行服务器的上传，但是我很难去判断要上传的图片，是不是已经全部上传成功了（后端同学不给写批量上传，又是一个我下决定学学后端的原因）。 我使用了一个定时器，去循环判断是不是图片全部上传成功了（这方法太傻了，而且极易出问题）。结果，在测试的时候，发现，很多手机 上传了图片提示没
js文档加载事件---
爱菜鸟高高飞
08-28 1904
1. 延迟调用read,,jQuery.holdReady $.holdReady(true); //延迟调用 $.getScript("myplugin.js", function() { $.holdReady(false); //释放,可再执行read }); 2.dom加载完成,后执行代码 $( handler ) $( document ).ready( ha...
多种方法实现当jsp页面完全加载完成后执行一个js函数
10-26
在网页开发中，有时我们需要确保页面完全加载后再执行某些JavaScript函数，这有助于保证操作的正确性和用户体验。在JSP页面中，实现这个需求有多种方式。以下将详细讲解标题和描述中提到的几种常见方法： 1. **使用...
关于文档加载完成事件 — onload 事件、ready事件
贵林之恋的博客
06-14 2975
一、$(window).load(function(){})、window.onload=function(){}、$(document).ready(function(){})的区别：       1、$(window).load(function(){})、window.onload=function(){}              是页面中的所有元素（包括图片、flash、引用文件）等...
外部引入js代码如何等待文件加载完成再去执行
weixin_45243726的博客
10-26 2429
window.addEventListener('load', function() { //此处写js代码 }) // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等，然后再去执行这个函数中的代码 二、DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些 document.addEventListener('DOMCont...
js 控制一次加载一张图片，加载完成后再加载下一张
前端小99的博客
09-07 693
【代码】js 控制一次加载一张图片，加载完成后再加载下一张。
浅谈文档加载完成事件——document.ready和onload的区别
热门推荐
筱葭的博客
03-20 1万+
文档加载完成的两种事件 ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）onload，指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。   1、DOM ready 文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。 DOM ready在加载JavaScript和CSS与加载图片等非文字媒
html如何等待整个文档加载完后再执行脚本
weixin_35750747的博客
12-27 777
你可以使用 window.onload 事件来等待整个文档加载完后再执行脚本。 具体方法如下： 在页面的 <body> 标签内放置脚本标签，如： <body> <!-- 其它内容 --> <script> // 脚本内容 </script> </body> 在脚本内容中添加如下代码： window.onlo...
js判断页面加载完成绑定事件
如鹿渴慕泉水的专栏
03-18 1095
bindReady: function () { if (this.readyBound) { return; } this.readyBound = true; if (document.readyState === "complete") { return setTimeout(this.ready, 1); }
JS语句中等某个方法执行完再执行后面逻辑
Ypromise-的博客
02-21 5136
在写script语句的时候，常遇到在代码逻辑中需要请求后台或别的运算方法执行完拿到结果再继续执行代码的场景。
script 的load 可以实现外部js文件被加载完成并执行完成后才被触发的
qlin_11的博客
10-28 1142
onload事件在资源被加载完成后会被触发。对于script标签，在外部js文件被加载后代码会被立即执行。那么，外部js文件中的代码和该script标签的onload回调函数，它们的执行顺序是怎样的呢？没有找到官方的说明文档，所以自己做个实验。原文链接：https://blog.csdn.net/wlx1991/article/details/80813272。可以看到，在四大浏览其中，script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的。
合并table行的实现方式页面加载完成后使用js实现动态加入rowspan
足迹
07-18 1252
列表在加载完成后，使用JS的方式做table列表合并行。 首先需要用到jquery引用 下面是table的代码 <table> <thead> <tr> <th>序号</th> <th>大类</th> <th>小类</th> <th&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值