jquery (js中window.onload与jquery中$(document.ready())的区别)

最新推荐文章于 2020-09-23 07:30:00 发布

加木Go

最新推荐文章于 2020-09-23 07:30:00 发布

阅读量2.5k

点赞数

分类专栏： jquery

javascript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

jquery

24 篇文章 0 订阅

订阅专栏

jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别)

耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：aa.jpg最好是一张大容量图片）

    Java代码   
    
  
 <html>  
 <head>  
 <script type='text/javascript' src='jquery-1.3.2.min.js'></script>  
 <script type='text/javascript'>  
     $(document).ready(function(){  
         alert("先加载DOM结构,再弹出对话框,后加载大型图片及内容");  
     });  
     
    //***************  
    //window.οnlοad=function(){ alert("先加载DOM结构,后加载大型图片及内容,再弹出对话框");}  
    //***************  
 </script>  
 </head>  
 <body>  
 <p>大量内容</p>  
 <img src='aa.jpg'/>  
 </body>  
 </html>  

说明： $(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完

所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。

补充：(两者的具体用法)
window.onload用法

    Java代码   
    
  
 <script type='text/javascript'>  
 function winready(){  
     document.getElementByIdx_x.('load').style.display='none';  
 }  
 window.οnlοad=winready; //或者window.οnlοad=function(){winready();}  
 </scritp>  

jquery用法:

    Java代码   
    
  
 <script type='text/javascript'>  
     $(document).ready(function(){  
         $('#load').css('display','none');  
     })  
 </script>  

来源于
http://blog.sina.com.cn/s/blog_5d95e3130100qlh6.html
虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。

    Java代码   
    
  
 document.ready = function(fn) {  
     // 标准浏览器中，我们监听DOMContentLoaded事件来判断DOM加载完毕  
     if (document.addEventListener) {  
         document.addEventListener("DOMContentLoaded", function() {  
             document.removeEventListener("DOMContentLoaded", fn, false);  
         }, false);  
     }  
    
     // IE中我们根据document.documentElement.doScroll("left")出错，来判断DOM加载完毕  
     else {  
         if (document.documentElement.doScroll && window == window.top) (function(){  
             try {  
                 document.documentElement.doScroll("left");  
             } catch (error) {  
                 setTimeout(fn, 0);  
                 return;  
             }  
         })();  
     }  
 }  

    Java代码   
    
  
 <script language='javascript'>  
   
 (function () {  
 var ie = !!(window.attachEvent && !window.opera);  
 var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);  
 var fn = [];  
 var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };  
 var d = document;  
 d.ready = function (f) {  
     if (!ie && !wk && d.addEventListener)  
       return d.addEventListener('DOMContentLoaded', f, false);  
     if (fn.push(f) > 1) return;  
     if (ie)  
       (function () {  
         try { d.documentElement.doScroll('left'); run(); }  
         catch (err) { setTimeout(arguments.callee, 0); }  
       })();  
     else if (wk)  
       var t = setInterval(function () {  
         if (/^(loaded|complete)$/.test(d.readyState))  
           clearInterval(t), run();  
       }, 0);  
 };  
 })();  
   
 </script>  

把这段代码放到你的页面中或者某个导入的脚本中，然后你就可以像下面这样使用了：
来源
http://hi.baidu.com/sch362017466/blog/item/fdbeb1ec148935dbb21cb172.html

加木Go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery (js中window.onload与jquery中$(document.ready())的区别)

jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：aa.jpg最好是一张大容量图片） Java代码 'text/javascript' src='jquery-1.3.2.min.js'> 'text/javas
复制链接

扫一扫