当前位置:首页 > 编程教程 > jQuery技术文章 > 提取jquery的ready()方法单独使用示例

实例分享提取jquery的ready()方法

  • 发布时间:
  • 作者:码农之家
  • 点击:86

这篇文章主要知识点是关于jquery、ready()、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
  • 类型:前端开发大小:131.7 MB格式:PDF作者:李刚
立即下载

提取jquery的ready()方法单独使用示例

大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。

如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。我们需要更快的方法。Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。

MSDN关于JSCRIPT的一个方法有段不起眼的话,当页面DOM未加载完成时,调用doScroll方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。所以 对于Mozilla & Opera 浏览器,在dom树载入后有现成的 DOMContentLoaded 事件。对于Safari 浏览器,有document.onreadystatechange事件,当该触发时,如果 document.readyState=complete时,可视为dom树已经载入。

对于ie,当在iframe内时,同样有document.onreadystatechange事件,对于ie在非iframe内时,只有不断地通过能否执行doScroll判断dom是否加载完毕。

在本例中每间隔5毫秒尝试去执行 document.documentElement.doScroll('left')。在ie8下,貌视非iframe窗口也会有document.onreadystatechange事件,另外你也可以在构建自己的框架时使用此函数。

 

 

(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
   {
    isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕
   }
   catch(e)
   {
    return;
   }
   bindReady();
  },5);
 }
 }
})();

 

使用方法如下:

 

 

ready(dosomething);//dosomething为已存在的函数
//也可以通过闭包来使用
ready(function(){
 //这里是逻辑代码
});

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery 相关电子书
学习笔记
网友NO.486086

jQuery ready()和onload的加载耗时分析

本文实例讲述了jQuery ready()和onload的加载耗时。分享给大家供大家参考,具体如下: htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="js/jquery-1.10.1.min.js" type="text/javascript"/scriptscript type="text/javascript" var startTime = new Date().getTime(); $(document).ready(function(){ test1(); }) function test1(){ var endTime2 = new Date().getTime(); var a = endTime2 - startTime; $("divjQuery的ready() : "+a+" ms/div").appendTo("body"); } function test2(){ var endTime1 = new Date().getTime(); var b = endTime1 - startTime; $("pJavaScript的window.onload : "+b+" ms/p").appendTo("body"); }/script/headbody onload="test2();" img src="img/demo.jpg" //body/html 效果图如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格……

网友NO.899516

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

jquery的ready()实现的是 DOMContentLoaded 事件,DOMContentLoaded与window load事件的区别 简单的说ready()是在文档加载完成就会触发,此时图片等资源可能还没有完全加载, load是在所有资源都加载完成后才会触发 看下ready函数的代码就什么都清楚了。下面的代码加上了注释: // Handle when the DOM is ready ready: function() { // Make sure that the DOM is not already loaded if ( !jQuery.isReady ) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) { return setTimeout( jQuery.ready, 13 ); } // Remember that the DOM is ready jQuery.isReady = true; // If there are functions bound, to execute if ( readyList ) { // Execute all of them var fn, i = 0; while ( (fn = readyList[ i++ ]) ) { fn.call( document, jQuery ); } // Reset the list of functions readyList = null; } // Trigger any bound ready events if ( jQuery.fn.triggerHandler ) { jQuery( document ).triggerHandler……

网友NO.712319

jQuery.holdReady()方法用法实例

本文实例讲述了jQuery.holdReady()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以暂停或者恢复jQuery.ready()事件。 调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法。 可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件,当满足一定条件时,再通过将此方法的参数设置为false,一一解除延迟。方法一般用于动态脚本加载,知道脚本加载完成然后再通过将此方法的参数设置为false,解除对jQuery.ready()事件延迟。 语法结构: jQuery.holdReady(hold) 参数列表: 参数 描述 hold 如果值为true,则会延迟jQuery.ready()事件。 如果值为false,则会解除对jQuery.ready()事件延迟。 如果值为false,则会解除对jQuery.ready()事件延迟。 实例代码: 实例一: !DOCTYPE html html head meta charset=" utf-8" meta name="author" content="//www.jb51.net/"……

网友NO.991878

jquery中的$(document).ready()使用小结

window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完,自动执行定义js代码(function)。 $(document).ready(function(){.... })这个函数是用来取代页面中的window.onload; document.ready()和传统的方法body onload=”load()” 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。 Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。 比如: script type="text/javascript" $(document).ready(function () { alert("我的第一个jQuery代码!"); }); /script 这段代码的意思是:当Dom Tree加载完成后,显示警告信息。document.ready()和传统的方法body onload=”load()” 相似,不同的是onload()的……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

idea注册码