$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:
1.加载多个函数的问题
<body onload="a();b();">
</body>
在Onload事件中只能这样加载，很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行

2.代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!

3.执行先后顺序不同
对于Body.Onload事件，是在加载完所有页面内容才会触发，我的意思是所有内容,包括图片，flash等.如果页面的这些内容很多会让用户等待很长时间.
而对于$(document).ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
<script type="text/javascript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
    </script>
上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法
$(window).unload(function() {
            alert("good bye");
        });
上面代码会在页面关闭时引发.
在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>
对，就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">

alert($("#test").html());//I Can display the content

    </script>
</body>
<body>
   <script type="text/javascript">

alert($("#test").html());//I Can't display the content

    </script>
    <div id="test">this is the content</div>
</body>
上面两段代码, 第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

随机推荐

使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
qt之esc键
Esc键对大家来说实在熟悉不过的了,在Qt中Esc键也会默认的进行一些事件的触发,今天对Esc键测试了一下,突然发现不像我想象的那样,在QDialog中按下Esc键会默认调用reject()方法而不是 ...
【原创】【Android New Features】—— 关于ADT 17的BuildConfig.DEBUG
在日常开发中,我们使用android.util.Log来打印日志,方便我们的开发调试.但是在打包发布时,需要手工把Log关闭,多少会有些不便,而且不排除打包者忘记关闭Log的情况.那么有没 ...
linux中U盘umonut时出现“Device is busy”的解决方法
问题: #umount /dev/sda1 umount: /mnt/usb: device is busy 查找占用目录进程: #lsof |grep /mnt/usb bash 1971 root ...
SpringMVC整合Shiro——（3）
SpringMVC整合Shiro,Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能. 第一步:配置web.xml <!-- 配置Shiro过滤器,先让Shiro ...
卷积神经网络CNN全面解析
卷积神经网络(CNN)概述从多层感知器(MLP)说起感知器多层感知器输入层-隐层隐层-输出层 Back Propagation 存在的问题从MLP到CNN CNN的前世今生 CNN的预测过 ...
h-index
https://leetcode.com/problems/h-index/ https://leetcode.com/mockinterview/session/result/xjcpjlh/ 看了 ...
innodb锁之间的兼容性判断
检查锁与锁之间的兼容性路径:/mysql-5.5.43/storage/innobase/lock/lock0lock.c 实现:见锁的强度比较 row 可理解为 lock 的锁模式 colum ...
用Visio画UML用例图
1.用例图用例图描述参与者所理解的系统功能.主要元素是用例和参与者. 用例图的4个基本组件:参与者(Actor).用例(Use Case).关系(Relationship)和系统. 下面以银行储蓄系 ...
深入.NET框架项目--魔兽登录系统
创建魔兽系统相关窗体: 登录窗体(frmLogin) 注册窗体(frmRegister) 主窗体 (frmMain) 实现魔兽登录系统: 登录的界面如下实现思路: 1.创建一个对象数组,长度为1 ...

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

随机推荐

热门专题