微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

jQuery ready函数滥用分析_jquery

php中文网
发布： 2016-05-16 18:10:32
原创
1137人浏览过

查看下之前写的代码，有许多这样的代码：

达芬奇
达芬奇

达芬奇——你的AI创作大师

达芬奇 144
查看详情 达芬奇
复制代码 代码如下:

$(function(){
//do something.
});

这里面可能写一些初始化样式、给其他dom元素附加事件处理等。刚开始没发现什么问题，但是在页面引用了一些下载缓慢的图片时，问题出现了：在页面html下载完，到所有资源全部下载完之间，绑定dom元素上绑定的事件无法执行、用脚本绑定的样式无效等混乱情况，也就是ready么有执行。

Ok，我的情况比较特殊，可能这个情况对于大部分同学是不可能遇到的，但是在开发中我们不得不考虑在某种比较糟糕的情况下，某个用户打开了你的网站，然后正好你的页面上有许多图片。。。那他只能等着了吧。。。

解决办法： 返璞归真
在ready出现之前我们的写法可能是这样的：

在文档中插入一段脚本块
复制代码 代码如下:

hello world


这样的代码在浏览器加载到这里时就会执行。注意，如果在这里的DOM元素test1在script块后面，这里就会出现异常。

我只是需要在页面加载时候就执行这些代码，不需要页面所有资源都加载完，所以，没必要让我坐在这等着"缓慢"的ready吧。

嗯，思考一下，整理下html结构
页面中到处都是这个script块也不好，不利于阅读，那就把他们整理一块拉到文档结尾吧。
复制代码 代码如下:



//让这里就放一些title、meta、link之类的神马东西吧。


Body html…….

Ok，如果您确实需要等着资源文件下载完才能执行脚本，那您还是老老实实的用jQuery的ready吧。
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript传递变量: 值传递?引用传递?_javascript技巧 下一篇：JavaScript中的排序算法代码_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Google Drive API：使用服务账户进行无用户认证访问指南 本教程旨在解决在Wix等无用户交互环境中，通过GoogleDriveAPI获取数据时，使用刷新令牌认证失败的问题。文章将详细介绍如何利用Google服务账户进行无缝、安全的服务器到服务器认证，涵盖服务账户的创建、权限配置以及在JavaScript环境中（如WixVelo后端）获取访问令牌并调用DriveAPI的完整实现方案。
2025-11-30 09:40:25
311
React应用中异步数据加载与渲染的健壮性实践：告别页面刷新崩溃 本教程针对React应用在页面刷新时因异步数据未加载完成导致崩溃的问题，深入探讨了条件渲染的必要性。我们将从常见的逻辑AND运算符方案入手，逐步引入更专业的解决方案，包括优化初始状态、管理加载和错误状态、利用可选链操作符以及构建健壮的条件渲染逻辑，旨在帮助开发者构建稳定、用户体验友好的React应用。
2025-11-30 09:32:13
175
React中onClick事件处理器的两种常见写法及其性能考量 在React中，处理onClick事件时，开发者常会遇到两种写法：直接引用函数和使用匿名函数包装。本文将深入探讨这两种方法的机制、各自的适用场景以及它们在性能上的细微差异。理解这些差异有助于编写更高效、更可维护的React组件。
2025-11-30 09:16:12
860
JavaScript：从点分隔字符串构建嵌套JSON结构 本教程将指导您如何使用JavaScript将一个点分隔的键字符串（如global.fontsize.bodyscale）和一个当前值，高效地转换为一个深度嵌套的JSON对象（如{global:{fontsize:{bodyscale:{value:currValue}}}}）。我们将重点介绍Array.prototype.reduceRight()方法的巧妙应用，通过从内到外构建对象结构，实现此功能，提供清晰的代码示例和详细解释。
2025-11-30 08:36:17
887
JavaScript函数式编程_Transducer Transducer是转换reduction过程的高阶函数，通过组合map、filter等操作为单一遍历流程，避免中间数组生成，提升性能。它返回接收reducer并返回增强reducer的函数，如map转换单元值，filter控制流入，再通过compose组合多个转换逻辑，最终在reduce中一次性执行，适用于数组、Observable等支持reduce的数据结构，实现高效、可复用、可组合的数据处理pipeline。
2025-11-30 08:04:02
740
如何正确在Angular父组件中更新子组件的Checkbox状态 本文深入探讨了在Angular应用中，当子组件的Checkbox状态需要根据父组件的异步操作（如API调用）结果进行更新时，可能遇到的常见问题及解决方案。我们将学习如何通过父子组件间的正确通信机制，结合Angular的变更检测，确保Checkbox状态在异步操作成功后得到准确且响应式的更新，避免直接@Input绑定失效的情况。
2025-11-30 08:01:17
942
JavaScript表单验证_复杂业务规则处理 表单验证需拆分逻辑以提升可维护性，将复杂规则封装为独立函数；2.可通过函数校验日期范围、动态必填项及金额总和限制；3.组合调用验证函数确保数据质量与用户体验。
2025-11-30 00:33:12
146
JavaScript日期处理_时区转换算法 JavaScript中Date对象存储UTC时间戳但显示本地时区，时区转换需理解其UTC本质。通过getTime()获取时间戳并手动加偏移可转时区，但推荐使用Intl.DateTimeFormat结合timeZone选项（如‘Asia/Shanghai’）进行准确格式化，避免构造函数解析错误。处理用户输入时应拼接时区标识或用国际化API，复杂场景建议采用moment-timezone或date-fns-tz等库以确保正确性。
2025-11-29 21:45:07
396
标签模板字面量_javascript模板引擎 标签模板字面量通过函数处理模板字符串，可实现如HTML转义等安全操作。
2025-11-29 21:44:02
983
JavaScript算法优化_递归与迭代 递归代码简洁但易栈溢出且效率低，迭代性能优但逻辑复杂；应根据问题选择并用记忆化或尾递归优化递归。
2025-11-29 21:44:02
389
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部