`
fackyou200
  • 浏览: 309498 次
  • 性别: Icon_minigender_1
  • 来自: 山西太原
社区版块
存档分类
最新评论

JS - jQuery Event 中 load() 、 ready() 的区别

阅读更多

在jQuery中,要做到"等网页载入后再执行",我们有两种选择
     $(document).ready(fn)
$(window).load(fn)
     二者的差别在于:
        $(document).ready(fn)发生在"网页本身的HTML"载入后就触发,
        $(window).load(fn)则会等到"网页HTML标签中引用的图档、内嵌物件(如Flash)、IFrame"等拉哩拉杂的东西都载入后才会触发。

一般来说,等网页全部元素都载入才执行程式时机有点晚,因为在此之前,使用者已经可以点选操作网页,跳脱我们程式的掌控范围。因此,我们几乎都是将程式放在$(document).read(function() { ... })中(即$(function() { … }))。
$(window).load(fn)适合执行一些要等待图档或元素全部载入才可进行的动作,例如:检查图档长宽。换句话说,上回的大图自动缩小Script可以透过$(window).load(fn)改写得更简单,完全不用担心图档没下载完成时的特殊处理,算是一个很好的应用范例。
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>    
  <title></title>    
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>    <script type="text/javascript">        
   $(function() {            
       alert("ready event!");        
   });        
   $(window).load(function(){            
      alert("load event!");        
  });    
 </script>
 </head>
 <body>
 <img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>
 
分享到:
评论

相关推荐

    jQuery_lazyload

    jQuery_lazyload是一个非常实用的JavaScript库,用于优化网页性能,特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载,即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容,从而减少初次...

    jquery.lazyload 实现图片延迟加载

    使用 `jQuery LazyLoad` 非常简单,首先需要在页面中引入 jQuery 和 LazyLoad 的 JavaScript 文件,然后按照以下步骤配置: 1. **标记图片**:给需要延迟加载的图片添加特定的类名,例如 `lazyload`。 2. **初始化...

    jquery API -jQueryAPI-100214.chm

    避免使用通配符选择器,减少DOM操作,使用事件委托,以及正确使用$(document).ready() 和 $(window).load(),都可以提高代码运行效率。 总结: jQuery API 提供了强大而简洁的工具,帮助开发者高效地处理DOM、实现...

    jQuery lazyload

    2. **下载jQuery Lazyload**:你可以从GitHub或者其他可靠的源获取tuupola-jquery_lazyload压缩包文件,解压后将所需的js文件(如`jquery.lazyload.js`)添加到你的项目中。 3. **引用插件**:在HTML文档的`&lt;head&gt;`...

    Manning - jQuery in Action

    7. **性能优化**:书中还会讲解如何有效地使用jQuery以提高性能,如减少DOM操作,使用事件委托,以及利用`$(document).ready()`和`$(window).load()`确保脚本在页面完全加载后执行。 8. **兼容性和最佳实践**:...

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

    - **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...

    jQuery文件.zip

    这个“jQuery文件.zip”压缩包内包含的应该是jQuery的核心库文件“jquery.js”,这是一个经过优化和压缩的版本,适用于实际项目中的生产环境。 1. **jQuery基础概念**: - jQuery是由John Resig在2006年创建的,其...

    jquery-ias.min.zip

    标题中的"jquery-ias.min.zip"表明这是一个关于jQuery IAS插件的压缩文件,其中包含了经过压缩的js文件。这种压缩通常是为了减小文件大小,提高网页加载速度,同时不影响插件的正常运行。 在描述中提到,Infinite ...

    jquery1.7.2中文手册

    jQuery是一个强大的JavaScript库,它的核心理念是“Write Less, Do More”,通过简洁的API接口,让开发者能够更高效、更简便地操作网页DOM元素,实现丰富的交互效果和动态功能。 1. **选择器(Selectors)** ...

    jQuery1.4.1中文速查参考

    jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在jQuery1.4.1版本中,这个库提供了丰富的功能和优化,使得网页开发更加高效。以下是对jQuery1.4.1版本...

    JQuery实战 教程

    同时,学习jQuery也将有助于理解其他JavaScript库和框架,如AngularJS、React和Vue.js等。记得通过实践来巩固理论知识,结合"JQuery实战视频教程"进行深入学习,相信你很快就能成为jQuery的专家。

    jquery的资料

    **jQuery 知识详解** ...总之,jQuery 是 JavaScript 开发中的得力助手,它大大简化了网页开发中的许多任务。通过深入理解和实践,你将能够熟练地运用 jQuery 实现丰富的网页交互,提升你的前端开发技能。

    JQuery权威指南源代码

    《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍,其源代码提供了丰富的实例和示例,帮助读者更好地理解和应用jQuery。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    JQUERY的API中文文档

    jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。其丰富的API使得开发者能够高效地编写出高性能的Web应用程序。这篇文档将深入探讨jQuery的核心功能及API用法,帮助...

    jquery开发文件

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的编写,特别是在处理 DOM(文档对象模型)、事件、动画以及Ajax交互方面。以下是对标题和描述中提到的知识点的详细解释: 1. **jQuery 核心**...

    jQuery学习入门教程

    jQuery是JavaScript库中的一款经典工具,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。这篇“jQuery学习入门教程”旨在为初学者提供一个全面且深入的jQuery知识框架,帮助你们快速掌握这一强大的库...

    jquery.address.js

    1. 锚点链接处理:jQuery.address.js可以监听页面中的锚点链接,通过JavaScript控制页面滚动到相应的位置,而无需浏览器重新加载页面。这对于内容丰富的单页应用(SPA)来说尤其有用,可以实现平滑的页面导航。 2. ...

    122.jQuery基础

    jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程将深入讲解jQuery的基础知识,帮助初学者快速掌握这个强大的工具。 1. **jQuery简介** ...

    JQueryLazyLoad 图片懒加载实例

    - **初始化插件**:在jQuery的`$(document).ready`函数内,对具有`lazy`类名的图片元素调用`.lazyload()`方法。 ```javascript $(function() { $(".lazy").lazyload(); }); ``` ### 4. 配置选项 jQuery LazyLoad ...

Global site tag (gtag.js) - Google Analytics