JavaScript的window.load小记

最新推荐文章于 2024-06-23 11:57:29 发布
最新推荐文章于 2024-06-23 11:57:29 发布
阅读量1.3k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/shuangquan/blog/2998403
版权
本文介绍了JavaScript中window.onload事件的用途，它用于确保文档内容完全加载后执行脚本。文章讨论了不同浏览器的支持情况，提供了代码示例说明如何正确使用window.onload事件处理函数，以避免在页面元素未加载时执行脚本导致的问题。同时，文章提到了addEventListener和attachEvent方法作为替代的事件绑定方式。
摘要由CSDN通过智能技术生成

load事件通常用于检测文档内容或者图片是否加载完毕。

本文着重介绍注册在window对象上load事件，也就是window.onload事件。

关于事件处理函数注册，可以参阅如何注册事件处理函数一章节。

浏览器支持:

（1）.IE浏览器支持此事件。

（2）.edge浏览器支持此事件。

（3）.火狐浏览器支持此事件。

（4）.Opera浏览器支持此事件。

（5）.谷歌浏览器支持此事件。

（6）.safria浏览器支持此事件。

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:

（1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）.通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱（其实推荐使用），我们通常需要将脚本代码放在一个更为合适的地方，window.onload方式将是一个良好的选择。window.onload是一个事件，当文档内容完全加载完成会触发该事件。可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

先看一段代码实例:

 

[HTML] 纯文本查看 复制代码运行代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>  

<html>  

<head>  

<meta charset=" utf-8">  

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

#bg{

  width:100px;

  height:100px;

  border:2px solid red;

}
最低0.47元/天 解锁文章
chizhuo3576
关注
【JavaScript】window.location详解
a451319296的博客
08-05 8369
在网页浏览器环境中，window.location是一个指向当前窗口的Location对象。它提供了一系列属性和方法，用于获取和操作当前页面的URL信息。
JS的window.load事件
weixin_30394981的博客
08-18 508
window.load事件 　　　在页面或图像加载后发生 代码示例： 1 <!doctype html> 2 <html> 3 <head> 4 <title>window.onload示例</title> 5 <script type="text/javascript">...
js加载顺序疑惑：window.load、document.body.load和$(function(){})
zeromike
10-04 1088
        今天在看脚本加载的顺序，想探讨一下window.load和document.body.load和$(function(){})的执行顺序。我也没太研究明白，希望大神帮我一下，指明我前进的方向。我先谢了,我这想探讨的是为什么会出现这种情况，而不是说用哪种方式去实现加载，或者说规避这种情况。           浏览器使用Firefox32.0.3，Chrome39.0.216...
JavaScript -- window.load添加事件
wust_cyl的博客
11-09 2313
let addLoadEvent = function (func) { let oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () {...
javascript的window.onload方法使用
热门推荐
zmxj的专栏
09-03 7万+
window.onload方法，可以定义html中的onload方法例如：window.onload=function(){   var a = document.getElementById("loading");  a.parentNode.removeChild(a);}这样就可以通过js代码直接定义这个方法，而不需要象这样定义了 如果标签原来已经定义了onload方法，则可以通过下面的方法
$(window).load()方法理解、使用场景
L.Cheng Blog
10-11 4207
1、$(window).load() 和window.οnlοad=function(){}是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；$(document).ready() 是页面中的DOM元素加载完成后便可执行。2、$(window).load()和window.οnlοad=function(){}不同的是，前者可以和$(document).ready()一样，可以同时加载多个函数。
JS-Windows-load
11-11 94
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> function test...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
javascript的window.onload与jquery的$(document).ready()
weixin_34080903的博客
04-14 268
 以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。    w...
JS DOM编程笔记 - 详解load事件（十五）
小帅的编程笔记
10-31 1965
今天我们来学习JavaScript中的load事件，包括window的load事件，图片、script的load事件。 window load事件 对于window对象的load事件来说，当整个HTML页面的所有依赖资源（JS文件、CSS文件、图片等）加载完成时将会触发。 处理load事件，可以使用addEventListener() 方法来注册一个事件监听器： window.addEventListener('load', (event) => { console.log('页面已完成加载');
js中window.onload的含义作用
爬楼梯的前端小白的博客
02-02 6220
js中window.onload的意思
关于JavaScript使用window.onload的解释说明
记录分享编程与冲浪知识
02-20 1963
window.onload
JavaScript的window.onload使用
jingjing_amy的专栏
04-12 1万+
<br />JavaScript的window.onload使用：<br /> <br /><br />window.onload方法，可以定义html中的onload方法例如：<br />window.onload=function(){ <br />var a = document.getElementById("loading");<br />a.parentNode.removeChild(a);<br />}<br />这样就可以通过js代码直接定义这个方法，而不需要象这样定义了<body onl
javascript中的window.onload解释
m0_53127809的博客
01-02 1872
window.onload 我们都知道的是我们的前端页面都是从上向下加载，也就是说我们的javascript文件如果放在文本页面文件的上方，我们就会先加载javascript中的文件，而此时带来的问题就是，我们的javascript中的事件对象此时有可能还未被加载，导致代码错误。 我们的window.onload可以很好地有效的解决这个问题。我们都知道，window.onload代表的是一个事件，也就是该事件的发生会导致函数的调用。而window.onload代表的事件就是页面加载的结束，也就是说，不管
JavaScript学习（三）：window.onload事件
Andrew_Lii的博客
01-01 538
window.onloadwindow.onload事件主要用来解决JavaScript脚本在运行时获取不到对象的问题。
JavaScript--window.onload和jq的$(document).ready()
weixin_45406850的博客
02-12 1317
区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。 $(documrnt).ready()可以同时编写多个，并且都可以得到执行。 3.多个的执行结果 window.onload不能同时写多个，但是有多个时会执行，只是后执行的会将前一次执行的结果覆盖。 $(do
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
ASP.NET
07-22 1997
这篇文章主要介绍了js实现的页面加载完毕之前loading提示效果,结合完整实例形式分析了js页面加载时显示loading效果的实现技巧,需要的朋友可以参考下 本文实例讲述了js实现的页面加载完毕之前loading提示效果。分享给大家供大家参考，具体如下： 一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement...
javaScript之windowonload
18岁的蛋蛋博客
07-10 1395
window.onload的用法： 因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。 所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。 ...
Javascript：页面加载事件load
最新发布
听海边涛声
06-23 437
Javascript：页面加载事件load
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值