文档章节

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

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 513
阅读 38
收藏 0

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

 

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

       一个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方法在一个页面上注册两次会是什么样的结果:
    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(){...此处加上需要执行的内容...});即可...

     

本文转载自:http://lgscofield.iteye.com/blog/1884352

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更...

Junn
2014/10/10
0
2
javascript性能优化:创建javascript无阻塞脚本

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来...

grootzhang
2016/04/13
0
0
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

Carl_
2014/09/15
0
0
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

张悟空
2014/08/18
0
0
JavaScript的性能优化:加载和执行

js最大的问题是:无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器...

EDIAGD
2013/09/07
0
14

没有更多内容

加载失败,请刷新页面

加载更多

37. Sudoku Solver

Description tags: backtrack,hash table difficulty: hard Write a program to solve a Sudoku puzzle by filling the empty cells.A sudoku solution must satisfy all of the following......

52iSilence7
11分钟前
0
0
磁盘格式化、磁盘挂载和手动增加swap空间

9月26日任务 4.5/4.6 磁盘格式化 4.7/4.8 磁盘挂载 4.9 手动增加swap空间 4.5/4.6 磁盘格式化 #查看Linux所支持的文件格式 [root@zgxlinux-01 ~]# cat /etc/filesystems xfs...

zgxlinux
21分钟前
0
0
intellij idea中,鼠标拖动选择的是一块矩形区域

点“编辑”-->“列选择模式” 或者 按 Shift+Alt+Insert

hengbao5
24分钟前
0
0
中文地址

火力全開
38分钟前
0
0
71:循环之for、while、break、continue、exit

1、for循环语法: for 变量名 in 条件;do......;done 1:案例1:求1加到100的和: [root@localhost_02 for]# vim for1.sh #!/bin/bashsum=0for i in `seq 1 100`do sum=$[$sum...

芬野de博客
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部