在页面所有元素加载完成之后执行某个js函数
做项目的时候可能会遇到这种情况:
一个JSP页面中import了一个目录文件(menu.jsp),而且每个页面的<body>中都定义了onload事件,那么在此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象.
有的朋友肯定会说用jQuery的$().ready(function(){}),或者(function(){})这种方式, 其实这个函数和javascript的onload事件是由区别的,那么来看看他们的区别:
他们的主要的区别有两点:
-
执行时机
window.onload方法是在网页中的所有的元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。而通过jQuery中的$(document).ready()方法注册的事件处理程序,只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。 -
$(document).ready()方法可以多次使用而注册不同的事件处理程序,而window.onload一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。
先来看window.onload方法在一个页面上注册两次会是什么样的结果:function one(){ alert("one"); } function two(){ alert("two"); } window.onload = two ; window.onload = one ;
上面的代码运行后,会弹出“one”。
再来看看$(document).ready()方法分两次调用会是什么结果。function one(){ alert("one"); } function two(){ alert("two"); } $(document).ready(function(){ one(); }); $(document).ready(function(){ two(); });
上面的代码运行后,会分别弹出“one”和“two”。
好了,比较完了,也就是说window.onload和jQuery的方式都无法实现,所以有了下面的实现:var $$ = function(func){ if (document.addEventListener) { window.addEventListener("load", func, false); } else if (document.attachEvent) { window.attachEvent("onload", func); } } $$(function(){ show(); })
使用的时候只要这样:
$$(function(){...此处加上需要执行的内容...});即可...
相关推荐
实现jsp页面完全加载完成后执行一个js函数的方法有很多,在本文就简单为大家介绍下常用的几种,感兴趣的朋友不要错过
主要介绍了JavaScript实现当网页加载完成后执行指定函数的方法,实例分析了javascript加载页面及执行函数的技巧,需要的朋友可以参考下
主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下
主要介绍了javascript实现根据函数名称字符串动态执行函数的方法,结合实例形式分析了JS函数名的判断及函数动态调用相关操作技巧,需要的朋友可以参考下
主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下
上面代码的意思就是,当鼠标点击 id 为 link 的元素的时候,就触发了它的 onclick 事件,然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的,因为触发操作直接写进了 HTML 结构里面,内容和行为...
但是[removed]是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替[removed]。但...
今天小编就为大家分享一篇vue加载完成后的回调函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jquery刷新页面和JS常用的函数。另外jQuery实现跨域调用的问题可以联系我。
本文实例讲述了javascript封装addLoadEvent实现页面同时加载执行多个函数的方法。分享给大家供大家参考,具体如下: 如果想同时执行多个函数,可以将这些函数放入一个数组中,然后在onload事件里循环数组并执行,...
C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用
js 函数 javaScript 自定义函数一览表 js 函数 javaScript 自定义函数一览表
主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下
延时执行跳转或执行函数 url可以为地址或者定义好的javascript/jquery函数, 定义每次延时时间和延时次数, callback是每次延时可以执行的回调函数
vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip
一个js文件,实现动态加载js文件。在用extjs时,为了避免一次全部加载js文件而写的。
项目中经常会遇到这样的问题:当某个 js 脚本加载完成后再执行相应任务,但很多朋友可能并不知道怎么判断我们要加载的 js 文件是否加载完成,如果没有加载完成我们就调用 js 文件里面的函数是不会成功的。...