zoukankan      html  css  js  c++  java
  • jq的$(function(){})与window.onload的区别

    jq的$(function(){})与window.onload的区别

     
    最近一直在研究jq的源码,书写jq的代码我们通常会包裹在一个$(function(){})函数中,
    jq的$(function(){})也就是$(document).ready(function(){})的简写,与之对应的原生js的window.onload事件,这俩者之间到底有什么区别呢?

    $(function () {
        console.log("ready执行");
    });
    
    $(function() {
        console.log("ready1执行");
    });
    
    window.onload = function () {
        console.log('load执行');
    };
    window.onload = function () {
        console.log('load1执行');
    }
     
    
     

    我们来看一下控制台中输出的结果: 
    这里写图片描述 

    这里可以看出两点不同: 
    1.$(function(){})不会被覆盖,而window.onload会被覆盖,个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中,在对应时机一次出队。 
    2. $(function(){})window.onload执行前执行的,$(function(){})类似于原生js中的DOMContentLoaded事件,在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

    DOM文档加载步骤: 
    1.解析HTML结构 
    2.加载外部的脚本和样式文件 
    3.解析并执行脚本代码 
    4.执行$(function(){})内对应代码 
    5.加载图片等二进制资源 
    6.页面加载完毕,执行window.onload

  • 相关阅读:
    JMS(面向消息中间件)
    ActiveMQ消息中间件知识汇总
    linux安装mysql常见命令
    结果集耗尽时,检查是否关闭结果集时常用sql
    Spring注解驱动开发之事务概念
    nginx 基础
    HTTP原理
    MYSQL----cmake 数据库出错
    php安装Phalcon模块
    docker报错 Failed to start Docker Application Container Engine.
  • 原文地址:https://www.cnblogs.com/yu412/p/11548340.html
Copyright © 2011-2022 走看看