$(window).load和$(document).ready之间有什么区别?

时间:2011-03-03 14:27:32

标签: javascript jquery document-ready

我最近遇到了一个问题,我的JavaScript代码并从我的$(document).ready()中取出了部分代码并将其放在$(window).load()内修复了问题。

现在我了解window.loaddocument.ready之后被解雇,但为什么在document.ready之后,window.load()之后没有准备好?

9 个答案:

答案 0 :(得分:73)

所有资产加载完成后都会调用

load,包括图像。当DOM准备好进行交互时会触发ready

来自MDC, window.onload

  

加载事件在结束时触发   文件加载过程。在这   点,所有的对象   文档在DOM中,而且全部都在   图像和子帧已经完成   负荷。

从jQuery API文档中, .ready( handler )

  

虽然JavaScript提供了负载   用于在页面执行代码的事件   渲染,此事件没有得到   触发,直到所有资产如   图像已被完全接收。   在大多数情况下,可以运行脚本   一旦DOM层次结构出现了   完全构造。处理程序通过   到.ready()保证是   在DOM准备好之后执行,所以   这通常是最好的地方   附加所有其他事件处理程序和   运行其他jQuery代码。使用时   依赖于CSS值的脚本   风格属性,这很重要   引用外部样式表或   之前嵌入样式元素   引用脚本。

答案 1 :(得分:26)

$(document).ready()表示您的网页的DOM已准备好进行操作。

当整个页面(包括CSS和图像文件等组件)已完全加载时,会触发

window.load()

你想要达到什么目标?

答案 2 :(得分:8)

$(document).ready(function(){
//code here
});

我们几乎每次使用jQuery时都会使用上面的代码。

当我们想在DOM准备好后初始化jQuery代码时使用此代码。

$(window).load()

有时你想操纵图片。例如,您想要垂直和水平对齐图片,您需要获取图片的宽度和高度才能执行此操作。使用$(document).ready()如果访问者没有已加载图像,您将无法执行此操作,在这种情况下,您需要在图像完成加载时初始化jquery对齐功能。这就是我们使用$(window).load()

的地方

答案 3 :(得分:5)

$(document).ready是在加载DOM时触发的jQuery事件,因此在文档结构准备就绪时会触发它。

加载完整个内容(包括css,图像等)后,会触发

$(window).load事件。

这是主要的区别。

答案 4 :(得分:4)

$(document).ready()<body>...</body>

中包装DOM

$(window).load()是文档的papa,包含<html>...</html>

中的所有DOM

让我们使用你的情况来保存渲染处理。

答案 5 :(得分:2)

简单来说,在加载窗口的所有内容时调用window.load,而在加载DOM并准备文档结构时调用document.ready

答案 6 :(得分:1)

加载状态是创建窗口对象并且所有必要组件(包括DOM)已加载到内存中但尚未传递到渲染引擎以在页面中呈现相同内容时的状态。

另一方面,就绪状态确保DOM元素,事件和其他依赖组件被传递到渲染引擎,在页面上呈现,并且可以进行交互和操作。

答案 7 :(得分:1)

  1. $(document).ready比较快速滑块$(window).load Event。

  2. $(文件).ready在加载Dom时触发但是$(窗口).load事件     当Dom,css和图像完全装满时开火。

  3. &#13;
    &#13;
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>   
      <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
        <script> 
            $(window).load(function () {          
                var img = $('#img1');
          alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">     
        <div>
            <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
        </div>
        </form>
    </body>
    </html>
    &#13;
    &#13;
    &#13;

答案 8 :(得分:-1)

$(document).ready是一个jQuery事件。一旦加载DOM并准备好由脚本操作它就会触发它。这是页面加载过程中最早的一点,脚本可以安全地访问页面的html DOM中的元素。在所有图像,css等完全加载之前触发此事件。

当整个页面(包括CSS和图像文件等组件)已完全加载时,会触发

window.load()