$(window).load(function() {})和$(document).ready(function(){})的区别

2023-11-17

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:
$(document).ready(function(){
...
});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就
需要用到:
$(window).load(function() {
$("#btn-upload").click(function(){   //比如说:
uploadPhotos();
});

首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.

不用body.Onload()理由1:

如果我们想同时加载多个函数,我们必须这样写

<body οnlοad="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

 $(window).load(function() {
            alert("hello,我是jQuery!");
  });
 $(window).load(function() {
        alert("hello,我也是jQuery");
 });

这样写它会从上往下执行这两个函数,并且看起来漂亮多了.

不用body.Onload()理由2:

用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.

另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容

加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常

会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,

所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,

而无需等到图片或其他媒体下载完毕.

但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是

该使用$(function(){})往往需要结合具体需要而作不同的选择.

最后附上一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/JavaScript">

(function() {
            alert("DOM还没加载哦!");
        })(jQuery)
  </script>

呵呵,有时候我们也有这个需求!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

$(window).load(function() {})和$(document).ready(function(){})的区别 的相关文章

  • 轻松调试线上的app之抓包工具stream

    痛点 对于一个线上app 是不是会因为无法调试而痛苦不堪 今天就给大家介绍一款好用的ios抓包应用 安装 1 在appstore中搜索stream 直接下载 2 打开软件 设置https抓包 对于https我们需要安装一下证书 具体原因可以

随机推荐

  • Android基础面试常常死在这几个问题上,移动架构师成长路线

    近日一好友去阿里面试 面试失败了 分享了一个他最不擅长的算法面试题 题目是这样的 题目 给定一个二叉搜索树 BST 找到树中第 K 小的节点 出题人 阿里巴巴出题专家 文景 阿里云 CDN 资深技术专家 参考答案 考察点 基础数据结构的理解
  • java socket——心跳包

    首先先说说心跳包在socket连接中的意义 通过socket连接的双方为了保证在一段时间未发消息不被防火墙断开连接或者使对方及时知道自己是否已经断线而定期给对方发送的某些特殊标识字符 这个字符可以根据双方自定义 没有实际的通讯意义 而定制的
  • 前奏

    上期我们一起学了CNN中四种常用的卷积操作 如下链接 CNN中常用的四种卷积详解 从这期开始 我们开始步入目标检测领域的大门 开始逐步一层一层的揭开目标检测的面纱 路要一步一步的走 字得一个一个的码 步子不能跨太大 太大容易那个啥 字也不能
  • Appnium下载及安装

    Appnium官方访问地址为 http appium io 可访问查看关于Appnium的相关资料 根据官网提供的安装步骤 gt brew install node get node js gt npm install g appium g
  • 预览图片pdf等文件

    文件下载直接返回流即可 但是如果返回图片pdf等 不想下载只想预览下 即可以设置不同的头 返回不同的预览流 文件预览 param bucketName 桶名称 param request 请求 param response 请求响应 pub
  • 2023华为OD机试真题Java实现【篮球比赛/深度优先搜索】【2023.Q2】

    题目内容 在篮球比赛中 每个队员的实力不通 队伍的实力计算方式为所有球员战斗力之和为该队伍的总体战斗力 篮球队员的总人数为10 他们分成两个队伍 教练希望2个队伍的战斗力差值能够尽可能的小 请你帮他实现目标 给出10个球员的战斗力 如果你是
  • 【华为OD机试】导师请吃火锅【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 入职后 导师会请你吃饭 你选择了火锅 火锅里会在不同时间下很多菜 不同食材要煮不同的时间 才能变得刚好合适 你希望吃到最多的刚好合适的菜 但你的手速不够快 用m代表手
  • uniapp项目中防止用户重复提交

    1 在根目录下新建common文件并创建common js文件 代码直接复制粘贴即可 防止处理多次点击 function noMultipleClicks methods info methods是需要点击后需要执行的函数 info是点击需
  • CE认证EMC指令测试项及测试内容(智能开关)

    目录 发射 EMISSiON 1 交流电源端口传导发射Conducted Emissions from the AC mains power ports 2 辐射发射Radiated Emissions 3 谐波电流Harmonic Cur
  • SpringBoot项目中常见的参数传输方式

    传参方式 例子 请求方式 获取参数方式 说明 query 传统方式 getUser id 1 get和post 选用 RequestParam PathParam 路径传参 使用实体类 path REST风格 user 1 get和post
  • 【Redis】分布式锁

    Redis分布式锁 问题描述 随着业务发展的需要 原单体单机部署的系统被演化成分布式集群系统后 由于分布式系统多线程 多进程并且分布在不同机器上 这将使原单机部署情况下的并发控制锁策略失效 单纯的Java API并不能提供分布式锁的能力 为
  • Matlab多维数组漫谈教程

    MATLAB是一种强大的科学计算和数据分析工具 它支持多维数组操作 这使得它在处理复杂数据和矩阵计算方面非常出色 本文将详细介绍MATLAB中的多维数组以及如何使用它们进行各种操作 首先 我们需要了解多维数组的概念 多维数组是一个由元素组成
  • [从零开始学DeepFaceLab-2]: 使用-Windows可执行工具的下载、解压

    目录 前言 第1步 登录github官网 第2步 找到可执行程序下载入口
  • ElasticSearch安装在Windows上详细教程

    ElasticSearchWindows安装教程 Download Elasticsearch Elastic 解压ElasticSearch 打开elasticsearch 6 4 2 bin调用黑窗口 输入elasticsearch b
  • 给定一个字符串 s ,通过将字符串 s 中的每个字母转变大小写,我们可以获得一个新的字符串。返回 所有可能得到的字符串集合 。以 任意顺序 返回输出。

    class Solution public vector
  • 2023第五届CCPC河南省赛

    2023第五届CCPC河南省赛经历和题解 题目链接 榜单 经历 算法生涯第一场比赛正好是三年以来第一次线下省赛 因为学校不报销 QAQ 我和我们班两个同学三个大一一队跟着学长学姐一队一起自费趁着周六日假期从洛阳跑到郑州打比赛 周六晚上六点十
  • android项目迁移到androidX:类映射(android.support.v4*)

    支持库类 AndroidX 类 android support v4 accessibilityservice AccessibilityServiceInfoCompat androidx core accessibilityservic
  • 开源库uthash第三弹utstack.h

    文章目录 一 简介 1 1 介绍 1 2 源码获取 二 使用方法 2 1 栈头声明 2 2 栈操作 2 3 一个简单的实例 2 4 其他宏 一 简介 1 1 介绍 utstack h中包含了一组动态stack宏 使用起来非常简单 只需要将u
  • BUUCTF 之 [极客大挑战 2019] Havefun(GET 传参)

    BUUCTF 之 极客大挑战 2019 Havefun GET 传参 相关 题解 相关 项目 内容 难度 简单 类型 WEB 靶场 BUUCTF 坐标 Havefun 题解 启动靶机后 映入眼帘的是一只猫 网站首页没有按钮 提示信息等等 遇
  • $(window).load(function() {})和$(document).ready(function(){})的区别

    在我以前的开发中 一般用到javascript 我都是采用jquery的模式 也就是大多数时候 第一行写的是 document ready function 这个时候 不一定要等所有的js和图片加载完毕 就可以执行一些方法 不过有些时候 必