如何判断文档是否加载完成?

如何判断文档是否加载完成?在正常的加载过程中 js 的加载都是同步的 也就是在加载过程中 浏览器会阻塞接下来的内容的加载 这时候我们就要用到动态加载 动态加载是异步的 如果我们在后边要用到这个动态加载的 js 文件里的东西 就要保证这个文件加载完成后 再执行

大家好,欢迎来到IT知识分享网。

在正常的加载过程中, js的加载都是同步的, 也就是在加载过程中, 浏览器会阻塞接下来的内容的加载。

这时候我们就要用到动态加载, 动态加载是异步的, 如果我们在后边要用到这个动态加载的js文件里的东西, 就要保证这个文件加载完成后, 再执行下面的内容。

如何判断js是否加载完成?(实现loadScript(url,callback)异步加载脚本, 完成后执行回调函数, 要求支持IE)

我们使用document的readyState属性:document.readyState

readyState 属性返回当前文档的状态。

该属性返回以下值:

uninitialized – 还未开始载入

loading – 载入中

interactive – 已加载, 文档与用户可以开始交互

complete – 载入完成(loaded)

原生JS:

function loadScript(url,callback){   var script=document.createElement('script');     script.type='text/javascript';     script.async='async';     script.src=url;     document.body.appendChild(script);     if(script.readyState){ //IE       script.onreadystatechange=function(){         if(script.readyState=='complete'||script.readyState=='loaded'){           script.onreadystatechange=null;           callback();         }       }     }else{ //非IE       script.onload=function(){callback();}     } }

Jquery:使用 $.holdReady(true); $.getScript(); $.holdReady(false) 3个函数实现

使用方法:

$.holdReady(true); //hold住,等待a.js加载,后续代码不能执行
$.getScript('a.js',function(){   $.holdReady(false); //释放,a.js加载完成,继续执行后续代码 });

$.holdReady()函数表示 延迟加载。

实例: 判断js文件是否加载完成

function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', file); _doc.appendChild(js); if (document.all) { //如果是IE      js.onreadystatechange = function() { if (js.readyState == 'loaded' || js.readyState == 'complete') { alert('载入完成'); } } } else { js.onload = function() { alert('载入中'); } } } include_js('jquery-3.1.0.min.js');

监听DOM的对象-MutationObserver

创建MutationObserver对象

var mo = new MutationObserver( function callback );

参数只有一个, 就是回调函数(callback), 当MutationObserver监听到目标变化时会触发这个回调。

这个回调参数会被传递两个参数, 第一个是包含了若干个变化目标的信息的参数, 这些信息集合称为MutationRecord对象;第二个参数则是你创建的这个对象自身。

实例方法

1.observe():

// 第一个参数是要监听的DOM节点对象, 第二是用于配置的对象

observe( Node, option);

其中option对象可配置是否监听目标节点的子节点、是否监听html属性/文本等, 可以查看MutationObserverInit的详细介绍

2. disconnect()

停止监听。

3.takeRecords()

清空观察者对象的记录队列,并返回里面的内容

一个例子

下面这个例子演示了如何定时插入节点并被监听到, 效果点击这里可查看:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MutationObserver demo</title>
</head>
<body>
<div id="info" style="color:brown; font-size: 20px;">正在监听#wrap</div>
<div id="wrap"></div>
<script>
var body = document.body;
var info = document.getElementById('info');
main();
// 创建MutationObserver对象及其回调
function createMutationObserverObject(){
    var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;
    if(!MutationObserver){
        info.innerHTML = '您的浏览器不支持MutationObserver对象!';
        return false;
    }
    return new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
        info.innerHTML = '监听到DOM变化,新增元素的id: ' + mutation.addedNodes[0].id;
        });
    });
}
// 使用MutationObserver对象的observe方法对目标节点监听
function listen(){
    var observer = createMutationObserverObject();
    if(!observer) return;
    observer.observe(wrap, { attributes: true, childList: true});
}
// 定时往目标节点新增元素查看监听情况
function main(){
    listen();
    var count = 0;
    var listenDom = setInterval(function(){
    count++;
    var p = document.createElement('p');
    p.id = 'p' + count;
    p.innerText = "我的id是 p" + count;
    wrap.appendChild(p);
    if(count>=5){
        clearInterval(listenDom);
        //observer.disconnect();
    }
    }, 1500)
}
</script>
</body>
</html>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/95139.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信