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

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量753 收藏
点赞数
分类专栏： javascript 文章标签： javascript jquery
原文链接：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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现在页面加载完成后自动执行某个函数
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 1020
javascript实现在页面加载完成后自动执行某个函数
js判断页面加载完成绑定事件
如鹿渴慕泉水的专栏
03-18 1062
bindReady: function () { if (this.readyBound) { return; } this.readyBound = true; if (document.readyState === "complete") { return setTimeout(this.ready, 1); }
在页面加载之后执行JavaScript
flying meng的菜鸟居
08-04 2636
我们都知道，页面加载是有顺序的。让我们先来理一下页面的展示过程： 当你输入url并按下回车时 首先从本地查找域名，有的话直接用hosts文件里的ip地址，否则查询DNS，得到ip地址 建立TCP连接——进行“三次握手” 客户端发送http请求 服务端处理，并返回结果给客户端 关闭TCP连接——需要“四次挥手” 浏览器收到结果，开始解析资源（JS、CSS、HTML），解析HTML生成的dom树，和同时解析css生成的cssom树结合生成渲染树 根据渲染树渲染页面 当然，再详细的比如：如何解析生成DOM树、
bootstraptable 加载完成_等到bootstrapTable完全加载后再执行操作
weixin_39657521的博客
12-20 3951
I have a javascript based bootstrapTable that dynamically generates the table and data.I am having an issue trying to apply some CSS styling and classes to some of the td's that are being generated in...
bootstraptable 加载完成回调函数_牛皮了！头一次见有大佬把「JavaScript中的回调函数」详解得如此清晰明了...
weixin_39849287的博客
01-22 1899
前言callback，大家都知道是回调函数的意思。但是你对这个概念应该是模模糊糊。比如Ajax，你只知道去调用返回函数，如果对callback没有理解清楚，估计你在学习Node.js后会崩溃，因为callback是Node.js三大核心之一。一 .回调函数回调函数的概念A callback is a function that is passed as an argument to another...
js 控制一次加载一张图片，加载完成后再加载下一张
前端小99的博客
09-07 605
【代码】js 控制一次加载一张图片，加载完成后再加载下一张。
html如何等待整个文档加载完后再执行脚本
weixin_35750747的博客
12-27 693
你可以使用 window.onload 事件来等待整个文档加载完后再执行脚本。 具体方法如下： 在页面的 <body> 标签内放置脚本标签，如： <body> <!-- 其它内容 --> <script> // 脚本内容 </script> </body> 在脚本内容中添加如下代码： window.onlo...
文档加载完成自动调用Js中的方法
IVera_Jing的博客
12-14 466
步骤1 在body中用onload: 步骤2 在脚本中用window.onload: function myfunction() {     alert("this window.onload"); } /*用window.onload调用myfunction()*/ window.onload=myfunction;//不要括号
uniapp 等图片文件全部上传成功后，再继续执行js代码（图片压缩，同步上传）
leaf的博客
08-23 1977
uniapp 等图片文件全部上传成功后，再继续执行js代码 起因 前几天在写一个简单表单提交的时候，遇到了一个文件上传的问题。这个表单，需要上传三类图片，而且每一类都是可以多张上传的。 使用文件上传的组件，一般都是选择图片后，他就会自动进行服务器的上传，但是我很难去判断要上传的图片，是不是已经全部上传成功了（后端同学不给写批量上传，又是一个我下决定学学后端的原因）。 我使用了一个定时器，去循环判断是不是图片全部上传成功了（这方法太傻了，而且极易出问题）。结果，在测试的时候，发现，很多手机 上传了图片提示没
外部引入js代码如何等待文件加载完成再去执行
weixin_45243726的博客
10-26 2176
window.addEventListener('load', function() { //此处写js代码 }) // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等，然后再去执行这个函数中的代码 二、DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些 document.addEventListener('DOMCont...
vue动态加载外部依赖js代码实现
11-19
本文档把js加载做成vue组件，便于在其他模块引用，符合vue整体思路，供大家参考借鉴
关于JS与jQuery中的文档加载问题
12-11
jquery中的$(document).ready()类似于...3.最重要的一点是[removed]必须等到页面内包括图片的所有元素加载完毕后才能执行。 　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 下面说说在项目中
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
11-22
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性，从字面上来看，二者的功能很好理解，分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 819
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 424
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 679
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
bpmn-js推荐几款常用的插件
飞云先生
04-30 88
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 777
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值