龙空技术网

了解 JS 的加载顺序和方式,实现 Ready 方法

MLeo 354

前言:

如今同学们对“jquery中重新加载页面”都比较注意,兄弟们都需要了解一些“jquery中重新加载页面”的相关文章。那么小编在网摘上收集了一些有关“jquery中重新加载页面””的相关资讯,希望同学们能喜欢,咱们快快来学习一下吧!

页面加载 JS 顺序或方式不同,可能会导致功能失效、错误的产生或加载解析时间过长,拖慢整个页面展示。

了解 JS 的加载顺序

了解页面元素的加载顺序,找到 JS 执行失败原因。有时明明没有问的代码,可就获取不到元素值或信息,这可能是JS执行时间过早或过晚,而导致的 JS 执行失败。我们来看一幅图,了解defer、async属性对JS下载、执行顺序的影响

默认情况下,浏览器解析到JS文件就会立即下载文件,并执行文件,JS提前执行,获取不到页面元素,并导致页面解析中断,拖慢整个页面的加载。添加async属性后,就会异步下载JS文件并执行,执行时间不可控,JS执行时间过早或过晚,而导致的 JS 执行错误或失败。添加defer属性后,就会异步下载JS文件,等页面解析完成后再执行JSReady方法的实现

很多时候我们不把JS放在head中,而把JS放到body的最后面也就很好解释了?

首先,JS的下载和执行会中断页面的解析,拖慢整个页面展示,然后,放在head中,页面元素还没有加载,JS方法就无法获取或处理页面上的元素,这一点很容易忽视,但是,我们还有ready方法。

jQuery中的ready方法会在页面解析后运行,语法如下:

//语法 1$(document).ready(function)//语法 2$().ready(function)//语法 3$(function)

自定义方法,通过监听DOMContentLoaded实现ready方法

/** * 页面解析后执行 fn *  * /function ready(fn) {    if (window.addEventListener) {        window.addEventListener('DOMContentLoaded', function () {            //注销时间,避免重复触发            document.removeEventListener('DOMContentLoaded', arguments.callee, false);            fn(); //运行函数        }, false);    } else if (document.attachEvent) { //IE浏览器        document.attachEvent('onreadystatechange', function () {            if (document.readyState == 'complete') {                document.detachEvent('onreadystatechange', arguments.callee);                fn(); //函数运行            }        });    }}

当然还有我的onload方法,可以在页面完成所有加载后再执行

//window 的 onloadwindow.onload = function(){    //load     //some things ……}//body 的 onload<body onload="load()">
总结

可以看到,JS的执行顺序决定着程序是否正常工作。加载过早,可能无法获取到页面元素,而太晚,页面元素无法交互。对于执行的顺序,要以当前的程序功能而定。

联系方式

网站:

源文:

标签: #jquery中重新加载页面