前言：
现时小伙伴们对“如何判断js是第一次加载”大概比较重视，姐妹们都需要剖析一些“如何判断js是第一次加载”的相关内容。那么小编在网上网罗了一些有关“如何判断js是第一次加载””的相关知识，希望同学们能喜欢，我们一起来了解一下吧！在正常的加载过程中, 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> 
