`
wangshaofei
  • 浏览: 282244 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js中替换window.onload的方法 document.ready

    博客分类:
  • js
阅读更多

 通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如:

 <script language="javascript">

       window.onload = function () {

               alert('Hello World!');

        }

 </script>

     这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框,但是众所周知,window.onload 的特点是页面元素全部加载完成后才执行,比如页面内有大量的图片之类,当打开网页时,其实相关的 DOM 已经全部加载完成,此时已经可以执行你想要执行的脚本了,可是图片的加载速度要很慢于页面的 HTML,这显然在大多数情况下不是我们想要的。

      jQuery 提供一个 $(document).ready(); 来解决此问题,当页面 DOM 加载完成后,ready() 里的函数便会立即执行,但如果我们在不使用 jQuery 的情况下呢?
好了,废话不多说,大家都明白想要什么,以下是来自国外网站的一段代码,功能同等于 jQuery 的 $(document).ready();

看代码:

<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>

      把这段代码放到你的页面中或者某个导入的脚本中,然后你就可以像下面这样使用了:

 

<script language='javascript'>

   document.ready(function(){

           alert('Document is ready!');

   });

</script>

      打开页面,看到效果没?YES,这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery,但如果你的站点已经使用了 jQuery,就不用再多此一举了。

      另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段(由于字数限制,此处省略,详细的可看原文作者:http://www.vgot.net/?A65.htm )

      其实 window.onload 也并非是一无用处,很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能,这样 window.onload 就可以提供一种“加载中”的功能,又或者是页面内容很少,完全无需 document.ready(); 根据各种情况,应该合理的使用 onload 和 ready。

 

 

                                  为保护作者版权,特此连接原文作者连接:http://www.vgot.net/?A65.htm

 

另外:经实践得知,两者都可以加载多个函数

分享到:
评论

相关推荐

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

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

    document.ready和window.onload.docx

    windows

    实现在HTML页面加载完毕后运行js方法.docx

    `window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然这也意味着页面中的所有元素都可以被 JavaScript 代码所操作,但是,并不意味着...

    浅析document.ready和[removed]的区别讲解

    本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未...

    Jqyery中同等与js中windows.onload的应用

    关于在页面中放置脚本,将DOM操作的代码放在 `window.onload` 或 jQuery 的 `document ready` 事件中,可以确保元素在执行相关操作时已经存在。例如,下面的代码绑定了按钮点击事件: ```html &lt;div id="divInfo"&gt;...

    一张表格告诉你windows.onload()与$(document).ready()的区别

    在JavaScript和jQuery中,`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数,但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...

    js 某个页面监听事件渲染完毕的时间.pdf

    本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间,并对比两种常见方法:`window.onload`和jQuery的`$(document).ready`。 首先,我们来看`window.onload`事件。这个事件会在页面中所有的资源,包括HTML...

    JQ ready()和onload的加载耗时

    `$(document).ready()`与`window.onload`的主要区别在于执行时机。`ready`更早,它允许更快地访问和操作DOM,提高用户体验。而`onload`则确保了所有资源加载完毕,适用于那些依赖所有资源的场景,如图片计数、页面...

    jquery的$(document).ready()和onload的加载顺序

    在JavaScript和jQuery的世界里,了解`$(document).ready()`和`window.onload`的加载顺序是非常重要的,尤其是在处理页面加载和交互效果时。这两个事件都与页面加载有关,但它们触发的时机有所不同,这也可能导致在...

    jquery $(document).ready()和[removed]的区别浅析

    在JQuery中有一个经常被使用的方法$(document).ready(),这个方法在文档加载完成后会立即执行。而window.onload是原生JavaScript中用于检测页面上所有资源加载完成的事件。两者的用法在很多情况下非常相似,但它们...

    Jquery 在页面加载后执行的几种方式

    需要注意的是,jQuery的`$(document).ready()`方法可以多次使用,而且它和原生的`window.onload`并不冲突。如果两者都使用,则`window.onload`会在`$(document).ready()`之后执行。`window.onload`通常用于在页面...

    网页中JS函数自动执行常用三种方法_.docx

    另一种方法是使用 `window.onload` 事件来自动执行 JS 函数。例如: ```javascript &lt;script type="text/javascript"&gt; function myfun() { alert("this window.onload"); } window.onload = myfun; //不要括号 `...

    jQuery中的ready函数与[removed]谁先执行

    本文将深入探讨jQuery中的`$(document).ready()`函数与`window.onload`事件的区别,并解析它们各自的执行时机。 首先,我们来看`$(document).ready()`,这是jQuery提供的一种方法,用于在文档对象模型(DOM)准备...

    jQuery的ready方法实现原理分析

    这个方法与window.onload以及document.onload有所不同,window.onload和document.onload会等待页面中所有的资源(包括图片、样式表、子框架等)完全加载完成后才触发,而jQuery的ready方法只等待DOM树加载完成就可以...

    [removed]与$(document).ready()的区别分析

    在JavaScript和jQuery的世界里,`window.onload` 和 `$(document).ready()` 都是用来确保页面内容加载后执行特定脚本的事件,但它们之间存在一些关键的区别。理解这些差异对于编写高效、响应式的网页至关重要。 ...

    JQuery-- onload,ready方法详细解说

    在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件的触发时机。在页面加载完成后,会...

    jQuery mobile在页面加载时添加加载中效果 document.ready 和[removed]执行顺序比较

    本文主要讲述了在jQuery Mobile环境下,如何在页面加载过程中添加加载中效果,并比较了页面加载事件`document.ready`和`window.onload`的执行顺序。同时提供了一些示例代码来展示如何实现这一效果。 首先,了解...

Global site tag (gtag.js) - Google Analytics