js在网页加载完全后执行

发布时间：2020-12-15 00:29:56 所属栏目：C语言来源：网络整理

导读：把js文件从html分离后可以包上$(function(){});语句来帮助加载方式一 body onload="..." body onload="load()" Hello World! 方式二 window.onload 方式三 JQuery中方式四 JQuery中方式五写在html页面底部/body之前比较一 window.onload和$(window).loa

把js文件从html分离后可以包上$(function(){});语句来帮助加载

方式一 body onload="..."






<body onload="load()">
Hello World!

方式二 window.onload


        window.onload = function(){
            var map = new AMap.Map("container",{
                resizeEnable: true,zoomEnable: true,center: [116.397428,39.90923],zoom: 11
            });
        }

方式三 JQuery中


    $(window).load(function(){
        var map = new AMap.Map("container",{
            resizeEnable: true,zoom: 11
        });
    });

方式四 JQuery中


    $(function(){
        var map = new AMap.Map("container",zoom: 11
        });
    });

方式五写在html页面底部/body之前

比较一 window.onload和$(window).load();

JavaScript中的以下代码 :

window.onload = function (){// 代码 }
等价于

Jquery代码如下：
$(window).load(function (){// 代码 });

比较二 jquery $(document).ready() 与 window.onload

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕，可以DOM元素关联的内容并没有加载完

注意: 由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完

例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效
要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法
Load() 方法会在元素的 onload 事件中绑定一个处理函数
如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发
如果处理函数绑定在特定元素上，则会在元素的内容加载完毕后触发

Jquery 代码如下：


2.编写个数不同 
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
$(document).ready()可以同时编写多个，并且都可以得到执行
以下代码无法正确执行：

结果只输出第二个  
以下代码正确执行：

结果两次都输出 
3.简化写法 
window.onload没有简化写法 
$(document).ready(function(){})可以简写成$(function(){});
比较三 用$(window).load(function(){...})而不用body.onload()的几个理由
共同点： 它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的
不用body.Onload()理由1：
如果我们想同时加载多个函数,我们必须这样写

看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数

这样写它会从上往下执行这两个函数,并且看起来漂亮多了
不用body.Onload()理由2：
用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题
另外用$(window).load(function(){...})和body.onload()都存在同样一个问题:

它们都需要等到页面的所有内容加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),
所以我们经常会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,
所以在这里推荐使用$(document).ready(function(){}),或简写为$(function(){})，因为他会在页面的dom元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕
但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是该使用$(function(){})往往需要结合具体需要而作不同的选择

最后附上一段在所有DOM元素加载之前执行的jQuery代码,有时候也有这个需求
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

js在网页加载完全后执行

把js文件从html分离后可以包上$(function(){});语句来帮助加载

方式一 body onload="..."

Hello World!

方式二 window.onload

方式三 JQuery中

方式四 JQuery中

方式五 写在html页面底部/body之前

比较一 window.onload和$(window).load();

比较二 jquery $(document).ready() 与 window.onload

比较三 用$(window).load(function(){...})而不用body.onload()的几个理由

方式五写在html页面底部/body之前

比较三用$(window).load(function(){...})而不用body.onload()的几个理由