`

在Dom树加载后执行,jQuery中的ready

阅读更多
(function(){
        var isReady=false;//判断onDOMReady方法是否已经被执行过
        var readyList= [];//把需要执行的方法先暂存在这个数组里
        var timer;//定时器句柄
        ready=function(fn) {
               if (isReady )
                      fn.call( document);
               else
                      readyList.push( function() { return fn.call(this);});
               return this;
        }
        var onDOMReady=function(){
               for(var i=0;i<readyList.length;i++){
                      readyList[i].apply(document);
               }
               readyList = null;
        }
        var bindReady = function(evt){
               if(isReady) return;
               isReady=true;
               onDOMReady.call(window);
               if(document.removeEventListener){
                      document.removeEventListener("DOMContentLoaded", bindReady, false);
               }else if(document.attachEvent){
                      document.detachEvent("onreadystatechange", bindReady);
                      if(window == window.top){
                             clearInterval(timer);
                             timer = null;
                      }
               }
        };
        if(document.addEventListener){
               document.addEventListener("DOMContentLoaded", bindReady, false);
        }else if(document.attachEvent){
               document.attachEvent("onreadystatechange", function(){
                      if((/loaded|complete/).test(document.readyState))
                             bindReady();
               });
               if(window == window.top){
                      timer = setInterval(function(){
                             try{
                                    //在IE下用能否执行doScroll判断dom是否加载完毕
                                   isReady||document.documentElement.doScroll('left');
                             }catch(e){
                                    return;
                             }
                             bindReady();
                      },5);
               }
        }
})();


使用:

1、ready(fun);//fun为以有方法

2、ready(function(){alert(1)})
分享到:
评论

相关推荐

    jquery 实现的等待加载页面

    开发者通常会在`&lt;head&gt;`标签内引入jQuery库,并在`&lt;body&gt;`标签的`$(document).ready()`函数中编写加载动画的初始化代码,确保在页面内容加载之前显示加载提示。 `更多素材.url`是一个快捷方式或书签,指向更多的...

    jquery页面加载效果

    1. **DOM Ready**:在执行任何操作之前,必须确保DOM(文档对象模型)已经完全加载。jQuery的$(document).ready()函数用于确保这一点,只有当页面结构加载完毕后,才执行包裹在其中的代码。 2. **CSS3动画**:...

    jquery图片预加载

    为了在实际项目中应用这个预加载功能,我们通常会在DOM加载完成后(即`$(document).ready()`)调用`preloadImages`函数,确保所有元素都已准备就绪。例如: ```javascript $(document).ready(function() { var ...

    jquery经验总结——页面加载事件ready(fun)

    `$(document).ready()`是jQuery提供的一个强大工具,用于确保DOM加载完成后执行代码,从而避免页面加载过程中的各种问题。然而,对于包含iframe的复杂页面结构,需要特别注意`ready()`事件的触发时机,可能需要采用...

    angular监听dom加载完毕

    虽然Angular不推荐使用jQuery,但如果你的项目中已经引入了jQuery,可以使用`$(document).ready()`来监听DOM加载完成: ```typescript import * as $ from 'jquery'; @Component({...}) export class ...

    JavaScript的jQuery库中ready方法的学习教程

    这篇教程聚焦于jQuery库中的一个核心方法——`ready`,它在页面加载过程中的作用至关重要。`ready`方法确保了指定的函数在DOM(文档对象模型)完全加载并准备就绪时执行,而不是等待所有资源如图片、脚本等完全加载...

    jQuery 的加载事件

    `$(document).ready()`是最常用的页面加载事件处理方法之一,它会在DOM加载完成后立即执行回调函数,此时可以安全地访问页面元素并执行相应的操作。但需要注意的是,此时图片等资源可能尚未完全加载完毕。 **示例...

    在DOM加载完成时运行的代码,可以这样写:

    总结来说,确保代码在DOM加载完成后再执行是网页开发中的基础实践,可以利用jQuery的`$(document).ready()`或者原生JavaScript的`DOMContentLoaded`和`window.onload`事件来实现这一目标。正确使用这些方法可以优化...

    浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready...

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

    在 jQuery 中,ready() 函数是用来执行代码的一个核心函数,它确保了在 DOM(文档对象模型)完全加载和解析完成后执行代码。为了理解 ready() 函数,我们需要与 window 的 load 事件进行比较,了解它们在页面加载...

    原生JS实现DOM加载完成马上执行JS代码的方法

    这样,无论用户使用哪种浏览器,都能确保代码在DOM加载完成后立即执行,而不需要等待所有资源加载完毕。这个自定义的`ready()`函数与jQuery的`$(document).ready()`方法具有相似的功能,但无需引入jQuery库。

    jquery的加载提示

    例如,通过`$(document).ready()`函数确保在页面加载完成后执行我们的代码。 创建一个简单的加载提示,我们可以使用jQuery的`.show()`和`.hide()`方法来显示和隐藏元素。首先在HTML中设置一个用于显示加载提示的...

    jquery实现树的动态加载

    3. **jQuery初始化**:在页面加载完成后,通过jQuery选择器找到树形结构的容器,并为其添加点击事件监听器。 4. **Ajax请求**:当用户点击节点时,使用jQuery的`$.ajax()`或`$.get()`方法发送异步请求到服务器,...

    jquery加载页面的方法(页面加载完成就执行)

    在现代Web开发中,推荐使用jQuery的$(document).ready方法来实现在页面加载完成后执行代码,因为它仅需等待DOM树加载完成即可执行,不需要等待图片或其他资源加载。这样做可以提升页面加载速度和用户交互的响应性。...

    JQuery中DOM加载与事件执行实例分析

    主要介绍了JQuery中DOM加载与事件执行,实例分析了jQuery中DOM加载及事件执行的原理与实现方法,并补充说明了windows.onload方法和$(document).ready()方法的区别,需要的朋友可以参考下

    jQuery的ready方法详解

    jQuery的`ready`方法是JavaScript库的核心特性之一,它用于在网页DOM(文档对象模型)完全加载并就绪后执行指定的函数。这个方法对于页面交互和动态脚本的加载至关重要,因为它确保了你的JavaScript代码不会在DOM还...

    jQuery loading加载动画特效

    4. jQuery代码:使用$(document).ready()函数确保DOM加载完成后再执行动画代码。可以使用show(), hide()方法结合setTimeout()或setInterval()控制动画的显示和隐藏。 五、示例代码 ```html &lt;!DOCTYPE html&gt; ...

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

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

    jQuery无限滚动加载图片瀑布流代码

    在我们的案例中,jQuery 提供了方便的 DOM 操作接口,使得实现无限滚动加载变得更加简单。 ### 2. 瀑布流布局 瀑布流布局是一种自适应的网格布局方式,其特点是每一列的顶部对齐,而每一行的宽度根据内容自适应。...

Global site tag (gtag.js) - Google Analytics