请查看
http://qiusuozhe.com/archives/4391.html
一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如:
$(document).ready(function (){ alert('use in page script tag') });
$(document).ready(function (){ alert('use in import js file') });
现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
jquery ready可以写好几个，每个都执行
onload只能写一个，你写好几个，也只执行一个，好像是执行最后一个
分享到：
相关推荐
JQuery onload、ready 方法详细解说 在 JavaScript 库中，JQuery 提供了两种事件处理机制，即 onload 和 ready。它们都是在页面加载完成后触发的事件，但是它们之间有着一定的区别。 首先，我们需要了解这两种事件...
### 15天学会jQuery —— 入门与实践指南 #### 第一天：了解jQuery及其重要性 **一、jQuery是什么？** jQuery是一个快速、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。...
本文将详细介绍如何使用JavaScript（JS）和jQuery这两种方法在页面上获取百度接口提供的经度和纬度信息。百度地图API提供了丰富的地理定位功能，开发者可以通过调用其接口获取到用户的精确位置。 首先，我们来看...
<body onload="startSlideShow()"> <div id="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> </body> </html> ``` **方法...
<body onload="myfunction()">...</body> </html> ``` 这种方法可以在页面加载完成后执行函数 `myfunction()`。 另一种方法是使用 `window.onload` 事件来自动执行 JS 函数。例如： ```javascript <script type=...
`$(document).ready()`与`window.onload()`的区别在于： a. 执行时机：`window.onload()`等待整个页面包括所有资源（如图片）完全加载后执行，而`$(document).ready()`仅在DOM结构构建完毕时触发，不考虑资源加载...
$("<div><p>Hello</p></div>").appendTo("body"); } ``` - 运行结果：点击id为`test`的元素时，会在`body`中添加`<div><p>Hello</p></div>`。 #### 二、$(elem) **说明**：该函数用于限制jQuery的作用范围到一...
<title>jQuery图片预览</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/imagePreview.js"></script> </head> <body> <input type="file" id="imageInput"> ...
<body onload="s()"> <span id="hello"></span> </body> ``` 在这个例子中，我们首先在HTML的body标签中使用了onload事件，当页面加载完成后，会执行函数s()。在函数s中，通过document.getElementById获取到id为...
总结一下，`window.onload`和`jQuery .ready()`的主要区别在于： 1. **触发时机**：`window.onload`等待整个页面完全加载，包括所有资源；而`jQuery .ready()`只等待DOM加载完成。 2. **执行效率**：`jQuery .ready...
<script src="path/to/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#myTable tr:even').addClass('even'); $('#myTable tr:odd').addClass('odd'); }); </...
<title>jQuery图片预览</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #preview { width: 200px; height: 200px; display: none; /* 初始隐藏 */ } </style> </...
<body onload="assignValue()"> <input id="myInput" type="text"> <script> function assignValue() { var myInput = document.getElementById('myInput'); myInput.value = '预设的值'; } </script> </body> ...
本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间，并对比两种常见方法：`window.onload`和jQuery的`$(document).ready`。 首先，我们来看`window.onload`事件。这个事件会在页面中所有的资源，包括HTML...
<script src="path/to/jquery.min.js"></script> <style> .odd { background-color: #f2f2f2; } .even { background-color: white; } </style> </head> <body> <table id="myTable"> <tr><td>Row 1</td></tr>...
<title>jQuery Alert Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="myButton">Click me</button> <script> $(document).ready(function...
<script src="jquery.webcam.js"></script> </head> <body> <div id="cameraPreview"></div> <button id="snap">拍照</button> </body> </html> ``` 接下来，我们需要配置jQuery-webcam并将其绑定到指定的div...
#### 一、了解`window.onload()`与`$(document).ready()` 在传统的JavaScript中，`window.onload()`方法一直被广泛用于处理页面加载完毕后执行的操作。这是一种非常实用的方法，能够确保所有的资源（如图片、样式表...
<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr> <tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr> <!-- More rows... --> </table> <script> $(document).ready(function(){ $("#myTable tr...
### 15天学会jQuery（完整版）：深入学习与实践 #### 第一章：认识jQuery—What, Why, When, Where, Who ##### **What（什么是jQuery）** - **定义**：jQuery是一款轻量级的JavaScript库，旨在简化HTML文档遍历、...