jquery的ready()和onload的问题

最新推荐文章于 2022-11-06 21:35:22 发布

chengjianfei9579

最新推荐文章于 2022-11-06 21:35:22 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/121lyyllm/blog/737982

版权

今天做一个触摸左右活动的效果，在第一次加载页面时，效果不出来。要调一下适配器的大小才能滑动。猜想是初始化时，没有拿到屏幕的大小。将加载数据的onload方法，换成ready方法。问题解决。

随便在温习下这两个方法的不同处。

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)

一般样式控制的，比如图片大小控制放在onload 里面加载;
jS事件触发的方法，可以在ready 里面加载;

1.ready()的三种写法

    //ready的第一种写法
$(function(){  
        // do something  
    });

    //ready的第二种写法
    $(document).ready(function(){  
        //do something  
    })    
    //ready的第三种写法
    $().ready(function(){  
        //do something  
    })

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

接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:

加载多个函数的问题
- <body οnlοad="a();b();">
  </body>
  在Onload事件中只能这样加载，很丑陋…
- 而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行
代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!
执行先后顺序不同
- 对于Body.Onload事件，是在加载完所有页面内容才会触发，我的意思是所有内容,包括图片，flash等.如果页面的这些内容很多会让用户等待很长时间.
- 而对于$(document).ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

3.但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.

<script type="text/javascript">  
    $(window).load(function() {  
         alert("hello");  
    });  
    $(window).load(function() {  
        alert("hello again");  
    });  
</script>

上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
4. 当然不要忘了与之对应的Unload方法，此方法代码会在页面关闭时引发.

<script type="text/javascript">  

    $(window).unload(function() {  

        alert("good bye");  

    });  

</script>

5. 在所有DOM加载之前引发JS代码，这个方法可以用子啊调试的时候有时候开发的时候也用这种方法。

<body>  
    <script type="text/javascript">  
        (function() {  
            alert("hi");  
        })(jQuery)  
    </script>  
</body>

总结：js方法多的时候，会各种冲突，一般都是加载顺序引起的。

转载于:https://my.oschina.net/121lyyllm/blog/737982

chengjianfei9579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的ready()和onload的问题

今天做一个触摸左右活动的效果，在第一次加载页面时，效果不出来。要调一下适配器的大小才能滑动。猜想是初始化时，没有拿到屏幕的大小。将加载数据的onload方法，换成ready方法。问题解决。随便在温习下这两个方法的不同处。页面加载完成有两种事件，一是ready，表示文档结构已经加载完成...
复制链接

扫一扫