比较body.onload(function())、$(document).ready(function())与$(windows).load(function)

原理对比

body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页面的脚本;

$(windows).load(function())的加载效果与body.onload(function())是一样的效果;

$(document).ready(function())是优先对文档结构进行加载(不包括图片等非文字媒体文件),即优先加载HTML DOM,然后执行脚本。



★ $(document).ready(function())的实例

<script src="js/jquery-1.7.2.min.js"></script>
    <script>
        function myFunction() {
            $("#test").html("Changed")
        }
        $(document).ready(myFunction);
        /*$(document).ready()是优先对文档结构进行加载(不包含图片等非文字媒体文件),不必等到所有的加载完毕*/
    </script>

<h1 id="test">Original</h1>

★ $(document).ready(function())的实例2

★ $(window).load(function())的实例

/*$(window).load(function()) 是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的, 与body.onload(function)是一样的执行顺序*/
        $(window).load(function () {
            alert("Hello");
        });
        /*设置并列的两个load(function)*/
        $(window).load(function () {
            alert("see you again!")
        })
        /*$(window).load(function()) 是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的, 与body.onload(function)是一样的执行顺序*/

body.onload(function())的实例

时间: 2024-08-10 16:26:36

比较body.onload(function())、$(document).ready(function())与$(windows).load(function)的相关文章

JavaScript tips:window.onload与$(document).ready()的差异

1.window.onload在$(document).ready()之后执行 原因:二者触发与否,都是依据document.readyState这个属性. (1)document.readyState的值:uninitialized.loading.interactive.complete(这四个值,依据时间先后排序). (2)当其值为interactive时,会触发documentContentLoaded事件,JQuery.ready()就是对documentContentLoaded事件

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

<锋利的jQuery>上摘抄下来: window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结果绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 编写个数 不能同时编写多个 以下代码无法正确执行:window.load = function() {  alert("test1"); }; window.load = function() {  alert("test

jquery学习笔记一之window.onload与$(document).ready()区别

1.window.onload与$(document).ready()区别 执行时机:前者必须等待网页中所有的内容加载完毕后(包括图片)才能执行,后者 网页中说有的Dom结构绘制完毕后就执行,可能Dom元素关联的内容并没有加载完成. <!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="js/j

window.onload()和$(document).ready()区别

1 $(window).load(function() { 2 $("#btn-upload").click(function(){ //比如说: 3 uploadPhotos(); 4 }); 5 }); window.onload()和$(document).ready()区别

window.onload与$(document).ready()

在我们编写javascript代码的时候,我们开始会这样写的: window.onload = function (){ //编写代码 } 我并不知道为什么会是这样写的,看着别人这样写我也就这样写.今天我就来简单的说说:谈到onload我们要讲HTML的执行顺序.HTML的执行顺序是至上到下的,除非你特别的说明,javascript不会等到等到页面加载加载完成后才执行的. 例如:网页中有这样的一行代码 <p id="name">My name is Aaron</p&

浏览器加载模式:window.onload和$(document).ready()的区别(详解)

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页

window.onload和document.ready的区别

window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不必等到页面中的其他文件(例如图片等文件)都加载完毕. 而document.ready则是必须要等到dom文档结构和其他包括图片在内放入所有文件全部加载成功后才可以执行 二.编写个数,被执行的次数不同 window.onload不能通知书编写多个,就算写了多个,也只能执行一个: document.re

window.onload和$(document).ready(function(){})的区别

原文出自:http://www.php100.com/html/program/jquery/2013/0905/5954.html 1.执行时间上的区别:window.onload必须等到页面内(包括图片的)所有元素加载到浏览器中后才能执行.而$(document).ready(function(){})是DOM结构加载完毕后就会执行. 2.编写个数不同:window.onload不能同时写多个,如果有多个window.onload,则只有最后一个会执行,它会把前面的都覆盖掉.$(docume

window.onload 和 $(document).ready(function(){})的区别

这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的插件的,在开始写时,才发现自己很多不足.百度上看见这个题目,发现自己不会,所以记下! window.onload    与     jq的 $(document).ready() window.onload 是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源),执行一个