页面所有元素加载完成之后执行某个js函数

最新推荐文章于 2023-05-16 17:10:09 发布
最新推荐文章于 2023-05-16 17:10:09 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： javascript

做项目的时候可能会遇到这种情况:

       一个JSP页面中import了一个目录文件(menu.jsp),而且每个页面的<body>中都定义了onload事件,那么在此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象.

       有的朋友肯定会说用jQuery的$().ready(function(){}),或者(function(){})这种方式, 其实这个函数和javascript的onload事件是由区别的,那么来看看他们的区别:

他们的主要的区别有两点：

  1. 执行时机
    window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。而通过jQuery中的$(document).ready()方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。
  2. $(document).ready()方法可以多次使用而注册不同的事件处理程序，而window.onload一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。
    先来看window.onload方法在一个页面上注册两次会是什么样的结果：
    Js代码   收藏代码
    1. function one(){  
    2.     alert("one");  
    3. }  
    4. function two(){  
    5.     alert("two");  
    6. }  
    7. window.onload = two ;  
    8. window.onload = one ;  

     

    上面的代码运行后，会弹出“one”。

    再来看看$(document).ready()方法分两次调用会是什么结果。

    Js代码   收藏代码
    1. function one(){  
    2.     alert("one");  
    3. }  
    4. function two(){  
    5.     alert("two");  
    6. }  
    7. $(document).ready(function(){  
    8.     one();  
    9. });  
    10. $(document).ready(function(){  
    11.     two();  
    12. });  
     上面的代码运行后，会分别弹出“one”和“two”。
    好了,比较完了,也就是说window.onload和jQuery的方式都无法实现,所以有了下面的实现:
    Js代码   收藏代码
    1. var $$ = function(func){  
    2.             if (document.addEventListener) {  
    3.                 window.addEventListener("load", func, false);  
    4.             }  
    5.             else if (document.attachEvent) {  
    6.                 window.attachEvent("onload", func);  
    7.             }  
    8.         }  
    9.           
    10.         $$(function(){  
    11.             show();  
    12.         })  
     使用的时候只要这样:
    $$(function(){...此处加上需要执行的内容...});即可...
ccyyss
关注
专栏目录
javascript实现在页面加载完成后自动执行某个函数
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 1270
javascript实现在页面加载完成后自动执行某个函数
两种方法实现在HTML页面加载完毕后运行某个js
10-25
在网页开发中，确保JavaScript代码在HTML页面完全加载完毕后再执行是至关重要的，因为这可以避免因元素未加载而导致的错误。本文将介绍两种方法来实现在HTML页面加载完成后运行JavaScript代码。 首先，我们来看传统...
JQuery 之 在数据加载完成后才自动执行函数
weixin_34159110的博客
02-21 1191
　　数据加载完成执行：　　$(window).load(function(){ ... });　　进入页就执行，不论等数据是否加载完成：　　$(document).ready(function(){ ... })　　这个还可以简写成　　$(function(){ ... }); 　　以下为解析：$(document).ready、body.Onload()和 $(window).load的区别 ...
页面加载完成在执行js几种方法
pyshibin的专栏
05-19 1049
方法1.如下程序，当页面完全加载后执行openTheIndexPage()方法 Telecommunications Data Collection System /js/baseframe.js"> /js/cookies.js"> /js/tag/tag.js">       function openTheIndexPage() {             open
当jsp页面完全加载完成后执行一个js函数
01-03 3213
方法1.如下程序，当页面完全加载后执行openTheIndexPage()方法  [html] view plaincopyprint? html>    03.head>    04.meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    05.title>Telecommuni
JavaScript判断页面加载完之后再执行预定函数的技巧
10-22
load事件只有在整个页面完全载入之后才会触发，因此在load事件处理函数中编写的JavaScript代码，可以确保在所有HTML元素加载完成之后执行。window对象的load事件的写法如下： ```javascript window.addEventListener...
vuejs实现ready函数加载完之后执行某个函数的方法
10-18
在Vue中，我们通常会遇到在数据完全加载并渲染到DOM后执行某些特定函数的需求，例如在本例中，我们需要在表格元素（tds）全部显示在页面上之后，对表格中的选择框添加监听事件。 Vue.js 提供了一个叫做 `Vue....
详解Vue.js在页面加载时执行某个方法
10-17
在Vue.js中，我们需要在页面加载时执行某些初始化操作或数据获取，这可以通过利用Vue实例的生命周期钩子函数来实现。接下来，我们将详细讨论如何在Vue.js中实现在页面加载时执行特定的方法。 首先，Vue实例的生命...
jquery等待特定元素加载再执行相关函数
*
09-23 4530
jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已
多种方法实现当jsp页面完全加载完成后执行一个js函数
10-26
实现jsp页面完全加载完成后执行一个js函数的方法有很多，在本文就简单为大家介绍下常用的几种，感兴趣的朋友不要错过
js判断网页是否加载完毕----包括图片
weixin_33672109的博客
01-12 1005
在做页面的时候,经常碰到要在页面加载完全之后再去展现。这时候我们会直接想到使用window.onload的方式,或者是采用Jquery的ready方法判断,这在一定程度可以搞定。   window.onload方式 window.onload =function() { //your code }    Jquery的ready方法 //: 判断网页是...
js中页面加载完成立即执行函数的写法
csdnzlcheng的博客
07-09 1496
1.直接在标签里写 <body onload="func()"></body> 2.js中window.onload调用 //整个window加载完成后执行 function func(){ /* window.onload调用*/ } window.onload=func //不要括号 window.onload=function(){ fun1(); fun2(); } 二、jQuery //document加载完成后就执行 $(documen
$nextTick与原生js先渲染dom再执行函数的方式
qq_30351747的博客
05-16 1679
$nextTick与原生js先渲染dom再执行函数的方式
JavaScript--JQuery事件 & 当网页元素加载完成后再去执行事件
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-15 2322
1. JQuery事件 这里的selector都是CSS选择器的语法 CSS选择器 示例1 弹出提示框: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 成功引入Jquery--> <script src="lib/jq.js"></scr
jq某个元素等待页面加载完执行
最新发布
05-25
你可以使用 `$(document).ready()` 函数来等待页面加载完成后再执行操作。示例代码如下： ```javascript $(document).ready(function() { // 这里是等待页面加载完成后要执行的代码 var element = $('.my-element'); // ... }); ``` 在上面的代码中，`$(document).ready()` 函数会在页面加载完成后执行传入的回调函数，这样你就能够获取到需要操作的元素并进行相应的操作了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值