• 锋利的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事件中没有注册函数,否则不会触发$()事件。

  • 相关阅读:
    如何让一个图片宽度为百分比时居中,且宽度等于高度
    React创建组件的三种方式及其区别
    给电脑换源 npm 国内镜像 cnpm
    ps使用图层合并切图
    textarea去掉右下三角号
    使用定时器通过改变图片的src来切换图片
    如何使一个元素垂直居中
    如何让背景图固定,不随着滚动条移动而且在不同分辨率的屏幕下铺满
    java 中MAP的按照进入顺序遍历与无序遍历
    java树形目录展示
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4054194.html
Copyright © 2020-2023  润新知