前端开发$(document).ready(function(){})与window.onLoad=function(){}的区别

web前端与游戏开发
前端游戏开发书籍
前端可以开发游戏吗

$(document).ready(function(){})与window.onLoad=function(){}的区别

**

**

$(document).ready()会在**网页框架加载出来后**执行;

代码片段 1

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>无标题文档</title>
    <script src=”http://www.wswhly.com/js/jquery-1.7.2.js”></script>
    <script type=”text/javascript”>$(document).ready(function () { alert(0); })</script>
</head>
    <body>
        <p><a href=”http://www.kdatu.com/2014/10/07/landscape-59/ ” target=”_blank”><img class=”alignnone size-full wp-image-52556″
                 title=”点击查看更多” alt=”544190″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544190.jpg” width=”990″ height=”556″
                 data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone size-full wp-image-52556″
                    title=”点击查看更多” alt=”544190″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544190.jpg” width=”990″
                    height=”556″ /&gt;</noscript></a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><span id=”more-52343″></span></p>
        <p><img class=”alignnone size-full wp-image-52483″ alt=”542598″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/542598.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52483″ alt=”542598″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/542598.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52487″ alt=”543131″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543131.jpg”
             width=”990″ height=”649″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52487″ alt=”543131″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543131.jpg” width=”990″
                height=”649″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52491″ alt=”543156″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543156.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52491″ alt=”543156″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543156.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52495″ alt=”543244″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543244.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52495″ alt=”543244″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543244.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52498″ alt=”543668″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543668.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52498″ alt=”543668″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543668.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52502″ alt=”543670″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543670.jpg”
             width=”990″ height=”556″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52502″ alt=”543670″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543670.jpg” width=”990″
                height=”556″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52508″ alt=”544124″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544124.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52508″ alt=”544124″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544124.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52512″ alt=”544127″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544127.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52512″ alt=”544127″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544127.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52516″ alt=”544129″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544129.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52516″ alt=”544129″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544129.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52521″ alt=”544135″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544135.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52521″ alt=”544135″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544135.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52525″ alt=”544137″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544137.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52525″ alt=”544137″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544137.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52530″ alt=”544143″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544143.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52530″ alt=”544143″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544143.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52535″ alt=”544144″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544144.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52535″ alt=”544144″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544144.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52538″ alt=”544146″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544146.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52538″ alt=”544146″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544146.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52542″ alt=”544147″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544147.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52542″ alt=”544147″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544147.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52546″ alt=”544177″ src=”http://www.kdatu.com/wp-content/plugins/lazy-load/images/1×1.trans.gif”
             data-lazy-src=”http://www.kdatu.com/wp-content/uploads/2014/10/544177.jpg” width=”990″ height=”618″><noscript>&lt;img
                class=”alignnone size-full wp-image-52546″ alt=”544177″
                src=”http://www.kdatu.com/wp-content/uploads/2014/10/544177.jpg” width=”990″ height=”618″ /&gt;</noscript></p>
    </body>
    </html>
(!!每次运行代码前,请清除浏览器缓存,保证测试结果正确性)运行代码,快速下拉,很多图片还没有加载出来,但是已经弹出窗口。

而window.onLoad是在页面**所有内容加载出来后**才执行。

**代码片段 2**
<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>无标题文档</title>
    <script type=”text/javascript”>
        window.onload = function () { alert(0); } < br />
    </script>
</head>
    <body>
        <p><a href=”http://www.kdatu.com/2014/10/07/landscape-59/ ” target=”_blank”><img class=”alignnone size-full wp-image-52556″
                 title=”点击查看更多” alt=”544190″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544190.jpg” width=”990″ height=”556″
                 data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone size-full wp-image-52556″
                    title=”点击查看更多” alt=”544190″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544190.jpg” width=”990″
                    height=”556″ /&gt;</noscript></a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><span id=”more-52343″></span></p>
        <p><img class=”alignnone size-full wp-image-52483″ alt=”542598″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/542598.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52483″ alt=”542598″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/542598.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52487″ alt=”543131″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543131.jpg”
             width=”990″ height=”649″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52487″ alt=”543131″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543131.jpg” width=”990″
                height=”649″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52491″ alt=”543156″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543156.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52491″ alt=”543156″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543156.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52495″ alt=”543244″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543244.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52495″ alt=”543244″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543244.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52498″ alt=”543668″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543668.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52498″ alt=”543668″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543668.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52502″ alt=”543670″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543670.jpg”
             width=”990″ height=”556″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52502″ alt=”543670″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/543670.jpg” width=”990″
                height=”556″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52508″ alt=”544124″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544124.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52508″ alt=”544124″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544124.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52512″ alt=”544127″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544127.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52512″ alt=”544127″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544127.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52516″ alt=”544129″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544129.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52516″ alt=”544129″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544129.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52521″ alt=”544135″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544135.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52521″ alt=”544135″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544135.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52525″ alt=”544137″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544137.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52525″ alt=”544137″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544137.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52530″ alt=”544143″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544143.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52530″ alt=”544143″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544143.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52535″ alt=”544144″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544144.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52535″ alt=”544144″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544144.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52538″ alt=”544146″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544146.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52538″ alt=”544146″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544146.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52542″ alt=”544147″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544147.jpg”
             width=”990″ height=”618″ data-lazy-loaded=”true” style=”display: inline;”><noscript>&lt;img class=”alignnone
                size-full wp-image-52542″ alt=”544147″ src=”http://www.kdatu.com/wp-content/uploads/2014/10/544147.jpg” width=”990″
                height=”618″ /&gt;</noscript></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><img class=”alignnone size-full wp-image-52546″ alt=”544177″ src=”http://www.kdatu.com/wp-content/plugins/lazy-load/images/1×1.trans.gif”
             data-lazy-src=”http://www.kdatu.com/wp-content/uploads/2014/10/544177.jpg” width=”990″ height=”618″><noscript>&lt;img
                class=”alignnone size-full wp-image-52546″ alt=”544177″
                src=”http://www.kdatu.com/wp-content/uploads/2014/10/544177.jpg” width=”990″ height=”618″ /&gt;</noscript></p>
    </body>
    </html
(!!每次运行代码前,请清除浏览器缓存,保证测试结果正确性)运行代码,等到所有图片加载完毕,才弹出窗口。

很明显,前者执行效率高于后者。

$(document).ready()**执行多次,且每次结果不同**。

代码片段 3

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>无标题文档</title>
    <script src=”http://www.wswhly.com/js/jquery-1.7.2.js”></script>
    <script type=”text/javascript”>
        $(document).ready(function(){alert(4);})
            $(document).ready(function(){alert(5);})
            $(document).ready(function(){alert(6);})
    </script>
</head>
<body></body>
</html>
运行代码,弹出4,5,6三个窗口,可知,三行代码都执行了,且输出了三个结果。[/color]

而window.onLoad尽管可以执行多次,但**仅输出最后一次执行的结果**。

代码片段 4

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>无标题文档</title>
    <script type=”text/javascript”>
        window.onload=function(){alert(1);}
            window.onload=function(){alert(2);}
        window.onload=function(){alert(3);}
    </script>
</head>
<body></body>
</html>
运行代码,只弹出一个窗口,输出一个结果3,可知,只输出了最后一个结果。

3.写法

$(document).ready()可以简写为$();

代码片段 5

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>无标题文档</title>
    <script src=”http://www.wswhly.com/js/jquery-1.7.2.js”></script>
    <script type=”text/javascript”>
        $(function(){alert(7);})
            $(function(){alert(8);})
    </script>
</head>
<body></body>
</html
运行代码,弹出两个窗口,输出7,8,可知,两者等值。
前端知识开发游戏
网易游戏 前端开发
游戏开发 前端后端
» 本文来自:前端开发者 » 《前端开发$(document).ready(function(){})与window.onLoad=function(){}的区别》
» 本文链接地址:https://www.rokub.com/7583.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!