• 锋利的jQuery-4--$(document).ready()和window.onload方法的区别


    jQuery中的$(document).ready()和JavaScript中的window.onload方法主要有两个方面的不同:

    1.执行时机:

    onload : 网页中所有的元素和元素的关联文件(包括图片)等完全加载完毕后才执行。

    $() : 在dom完全加载完毕后就可调用,此时,网页中的所有元素都是可以被jQuery访问的,但不意味着元素的关联文件都已加载完毕。

    注意:

    由于在$()方法内注册的事件,只要dom就绪就会被执行,因此可能此时元素的关联文件未下载完成。

    例如与图片有关的html下载完毕,并且已经解析为dom树,但很有可能图片还未加载完毕,所以例如图片的宽度和高度这样的属性获取不一定有效。

    要解决这个问题可以使用jQuery中的load方法:

    load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图片等)加载完毕后触发。如果绑定到某个元素上,则会在元素的内容加载完毕后触发。

    $(window).load(function(){
    
    });
    
    //等价于javascript中代码
    
    window.onload = function(){
    
    }

    2.多次使用:

    onload : 只能保存对一个函数的引用,多次调用会产生覆盖。

    function one(){
      alert("one");  
    }
    
    function two(){
      alert("two");  
    }
    
    window.onload = one;
    window.onload = two;
    
    //只弹出two对话框

    为了达到两个函数顺序触发的效果,需要再建一个函数

    window.onload = function(){
      one();
      two();    
    }

    如果有多个JavaScript文件,每个文件都需要用到window.onload()方法,这种情况用上边的方法会非常麻烦。

    $() : 可以多次调用,每次调用都是在现有的行为上追加,注册的函数会按照代码中的先后顺序依次执行。

    $(function(){
        one();
    });
    
    $(function(){
        two();
    });
    
    //依次弹出one, two。

     注意:

    请确保在body元素的onload事件中没有注册函数,否则不会触发$()事件。

  • 相关阅读:
    java继承
    Linux下word转pdf以及unoconv中文乱码问题
    jquery点击事件捕获
    在Windows上玩TensorFlow(一)——安装Docker【转】
    php面试总结
    [转载] PHP 线程,进程和并发
    微信小程序数据解密
    sql基础整理
    PHP 底层的运行机制与原理【转载】
    react-native 运行原理【转载】
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4054194.html
Copyright © 2020-2023  润新知