`

jquery学习之延迟jQuery的ready事件

阅读更多

       网页页面dom加载完成后,我们才会处理一些业务逻辑,但是 有时候我们需要在加载完成之前做一些别的任务,此时,就需要了解延迟ready的事件。

      jquery帮助文档概述:

暂停或恢复.ready() 事件的执行。

在$.holdReady()方法允许调用者延迟jQuery的ready事件。这种先进的功能,通常是使用动态脚本加载器,要加载的JavaScript比如 jQuery插件,如额外的ready事件才让事件发生,即使在DOM可能准备。此方法必须早在文件调用,在这样<head> jQuery脚本后,立即标记。ready事件之后调用此方法即使已经发射也将没有任何效果。

要延迟ready事件,第一次调用的$.holdReady(true)。当ready事件应该执行时,调用$.holdReady(false) 。请注意,多个holds可以放在ready事件上,每个$.holdReady(true)逐一调用。ready事件将不会执行,直到所有已发布了相应的一个$.holdReady(false) 正常的文件准备好条件得到满足。

 

 

参考案例:

<body>

<script src="js/jquery-2.1.4.min.js"></script>

<script>

$.holdReady(true);

$.getScript("js/mousetrap.js", function() {

    console.log("hold....");

    $.holdReady(false);

    console.log("hold after....");

});

$(function(){

console.log("ready.....");

});

</script>

</body>

执行结果:hold....

               ready.....

              hold after....

分享到:
评论

相关推荐

    jquery图片延迟加载

    使用jQuery监听滚动事件,判断图片是否进入视口。一旦图片位于视口内,就将其`src`属性替换为`data-src`中的真实URL,实现图片的延迟加载。 ```javascript $(document).ready(function() { $('.lazy').lazyload...

    jquery实现图片延迟加载过程.rar

    在jQuery中,我们可以使用`$(window).scroll()`函数来监听滚动事件,然后通过计算图片距离顶部的距离与窗口的高度来判断图片是否可见。 下面是一个简单的jQuery图片延迟加载实现步骤: 1. **设置数据源**:首先,...

    JQuery鼠标经过延迟处理

    标题中的"JQuery鼠标经过延迟处理"指的就是利用jQuery实现的这种延迟响应鼠标经过事件的技术。这种技术通常结合`setTimeout`或`setInterval`函数来实现,设置一个定时器,在指定的时间间隔后执行预定义的函数。这...

    jquery.DataLazyLoad数据延迟加载插件

    **jQuery DataLazyLoad 数据延迟加载插件** 在Web开发中,数据延迟加载(Data Lazy Load)是一种优化网页性能的技术,它允许我们只在用户需要时才加载数据或内容,而不是一次性加载所有信息。jQuery DataLazyLoad...

    jQuery学习指南

    - **纠正错误脚本知识**:jQuery提倡标准的编程实践,如延迟DOM操作直到DOM完全加载,避免直接在HTML元素上添加内联事件处理函数等,从而提高代码的健壮性。 - **扩展性**:jQuery拥有庞大的插件生态系统,几乎...

    jquery > 手机端 onClick 延迟解决

    `jQuery`在手机端的`onClick`事件处理中同样会受到这个延迟的影响,使得用户的交互体验下降。为了解决这个问题,我们可以采用一些技术手段来消除这个延迟,提高用户体验。 `jQuery`是一个广泛使用的JavaScript库,...

    jquery延迟加载图片

    **jQuery延迟加载图片技术详解** 在网页设计中,图片往往是页面加载速度的瓶颈。为了提高网页的加载效率和用户体验,开发者通常会采用延迟加载(Lazy Loading)技术,尤其是在图片众多的场景下。jQuery库提供了简单...

    jQuery滚动图片延迟加载插件【一个大神写的】

    **jQuery滚动图片延迟加载插件详解** 在网页设计中,图片是重要的元素之一,但大量图片的加载可能会拖慢页面的加载速度,特别是在用户首次访问页面时。为了解决这个问题,一种常见的技术是图片延迟加载,也称为懒...

    jQuery网页图片延迟加载代码.zip

    通过学习和使用这个压缩包中的代码,开发者不仅可以掌握jQuery实现图片延迟加载的技巧,还可以提升对网页性能优化的理解,从而提高网站的整体质量和用户体验。同时,这也是一个实践jQuery和JavaScript交互的绝佳实例...

    jquery快速学三(事件与动画)

    《jQuery快速学三:事件与动画详解》 在Web开发中,jQuery库以其简洁的语法和强大的功能,深受开发者喜爱。本篇将深入探讨jQuery中的事件处理和动画效果,帮助初学者快速掌握这两个核心概念。 一、事件处理 1. ...

    jquery Loading图片延迟加载特效

    综上所述,jQuery延迟加载特效能够显著提升网页性能,改善用户体验。通过结合选择器、事件监听和适当的数据存储方式,我们可以轻松地实现这一功能。同时,随着Web技术的发展,如Intersection Observer API的引入,...

    Jquery.ScrollLoading图片延迟加载

    **jQuery ScrollLoading 图片延迟加载技术详解** 在网页设计中,图片是不可或缺的元素,但过多的图片会增加页面的加载时间,影响用户体验。为了解决这个问题,开发人员通常采用图片延迟加载(Lazy Loading)技术。...

    最新版JQuery-jquery-3.2.1.min.js

    在旧版本的jQuery中,`jQuery.holdReady()`是一个控制文档准备就绪(DOM ready)事件触发时机的函数。通过设置`hold`参数为`true`,可以暂停文档准备好后执行的回调,直到调用`holdReady(false)`才继续执行。在3.2.1...

    jquery图片延迟加载效果

    以下是一个简单的jQuery延迟加载图片的实现步骤: 1. **HTML结构**:图片元素通常会有一个占位符,src属性设置为一个较小的透明GIF或默认图片,真正的图片源存储在data-src属性中。 ```html 延迟加载图片"&gt; ``` 2. ...

    JQuery图片延迟加载效果

    **一、jQuery延迟加载原理** 1. **监听滚动事件**:通过绑定滚动事件,我们可以检测用户是否滚动到特定的图片位置。 2. **判断图片是否可见**:在滚动事件触发时,检查每个图片元素是否在视口内,如果在,说明该...

Global site tag (gtag.js) - Google Analytics