`

load(),ready()

 
阅读更多

window.onload和$(document).ready()是有一定的区别的.

window.onload是在网页中所有的元素(包括元素中所关联的文件)完全加载到浏览器后才回去执行,这时JS才可以访问网页中的任何元素.

$(document).ready()是在DOM加载完成后就能进行事件的执行.

 

比如一个网页上有很多图片加载.每个图片有onclick事件.如果用onload来添加事件,那么必须等到图片全部加载完毕后才能对图片上的onclick事件进行处理.  如果用ready()来添加事件,那么只需要DOM加载完毕后就能进行事件的处理.所以ready()处理的速度比onload要快很多,只是图片在网页中没加载完成而已,不影响功能.

 

在jquery中也有和window.onload一样的方法,就是load()方法.

$(window).load()    ---网页中所有的元素(包括关联的对象)都加载完后执行事件.

   $(window).load(  function(){ . . . } )  和 window.onload = function(){...}    作用完全一样.

  

   如果想要等某个元素加载完毕后就加载事件,那么

   $("#id").load( function(){...} );

 

eg:

window.onload = function(){
    var aaa = document.getElementsByTagName("a");
    var i;
    for(var i=0;i<aaa.length;i++){
     
     aaa[i].onclick = function(){alert(i);};                      如果有3个a标签,最后每个a标签alert出来的是都是3.
    }
    alert(i);        //也是3
   }

 

 

 

 

分享到:
评论

相关推荐

    jQuery中document与window以及load与ready 区别详解

    在探讨jQuery中document与window的区别以及load和ready事件的不同之处时,我们首先需要了解JavaScript中的基本概念以及jQuery是如何封装和简化这些操作的。jQuery作为一个流行的JavaScript库,它提供了一套简化的...

    jquery中ready()函数执行的时机和window的load事件比较

    为了理解 ready() 函数,我们需要与 window 的 load 事件进行比较,了解它们在页面加载过程中的不同执行时机。 首先,让我们来看看 ready() 函数。ready() 函数在 jQuery 中实现的是 DOMContentLoaded 事件,这是一...

    jQuery中load()方法语法格式

    $(document).ready(function(){ $("#button").click(function(){ $("#tip").load("a.html"); }); }); &lt;button id="button"&gt;Load Data &lt;div id="tip"&gt;&lt;/div&gt; ``` 在这个例子中,当用户点击ID为`button`的按钮时...

    部署CNI网络插件 后, 各个节点还是处于 NotReady 状态 解决方法

    部署CNI网络插件 后, 各个节点还是处于 NotReady 状态 解决方法 # 文件下载以后 有三个文件 coredns.tar flannel.tar kube-flannel.yml # 如果以前运行过类似这样的命令, 请 先 执行 kubectl delete -f 原文件kube-...

    jQuery_lazyload

    - 初始化插件:在文档加载完成后(通常在`$(document).ready()`内)调用`$.lazyload()`方法,启用插件功能。 4. **配置选项**: jQuery_lazyload提供了多种可自定义的配置选项,例如: - `threshold`:设置元素...

    jquery lazyload延时加载

    $(document).ready(function() { $("img.lazyload").lazyload(); }); ``` 4. **可选配置**:LazyLoad 提供了许多配置选项,例如设置加载阈值、定义加载动画等,可以根据需求进行调整。 ```javascript $("img...

    JQuery LazyLoad 图片懒加载实例

    这通常在`$(document).ready()`函数内完成: ```javascript $(function() { $(".lazyload").lazyload(); }); ``` ### 4. 实例配置 jQuery LazyLoad 允许我们进行一些自定义配置,例如设置阈值(决定图片距离视口...

    javascript ready和load事件的区别示例介绍

    在网页开发中,JavaScript 的 ready 和 load 事件是非常关键的两个概念,它们用于控制代码在何时执行,以确保页面的正确渲染和交互。 首先来看 ready 事件。在 DOM 完全加载后,ready 事件即刻触发,而不需要等待如...

    jquery.lazyload 实现图片延迟加载

    2. **初始化插件**:在文档加载完成后(通常在 `$(document).ready()` 中),调用 `$("img.lazyload").lazyload();` 来初始化插件。 ```html &lt;img src="placeholder.png" data-src="actual-image.jpg" class="lazy...

    JQ ready()和onload的加载耗时

    本文将深入探讨`ready()`和`onload`这两个事件处理函数,它们都是用来确保页面元素加载完成后再执行特定代码的,但它们的用法和触发时机有所不同。 首先,`$(document).ready()`,通常简写为`$(function() {...})`...

    jQuery(document).ready(function($) { });的几种表示方法

    `jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...

    jquery.lazyload图片预加载效果 jquery预加载

    3. 初始化插件:在jQuery的$(document).ready()函数中调用$.fn.lazyload()方法,进行初始化配置。 ```javascript $(function() { $("img.lazy").lazyload(); }); ``` 这里,".lazy"是图片的选择器,可以根据实际...

    lazyload.js图片延迟加载(懒加载)插件

    $(document).ready(function() { $("img").lazyload(); }); ``` 5. **配置选项**:lazyload.js支持多种配置选项,例如: - `threshold`:定义图片进入可视区域的距离,默认值为0,即图片刚进入视口就开始加载...

    jquery城市选择插件lazyload-min.js.rar

    $(document).ready(function() { $("#province").citySelect(); }); ``` 这里的`#province`是你的省份选择元素的ID。 4. **准备数据**:在服务器端准备好省份和城市的JSON数据,以供插件在需要时加载。 5. **定制...

    图解微软性能测试工具VSTS2008 Load Test Agent安装

    状态需要为Ready 才是正确的配置。 配置测试项目 配置好Load Agent以后,还需要配置测试项目。每一个测试项目,都有一个测试配置文件,现在我们就来修改这个测试配置文件吧。进入配置的窗口以后,需要把控制器选择...

    JQ中$(window).load和$(document).ready区别与执行顺序

    在JavaScript和jQuery中,`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数,它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...

    JQuery-- onload,ready方法详细解说

    JQuery onload、ready 方法详细解说 在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件...

Global site tag (gtag.js) - Google Analytics