JS收藏——DOMReady

浏览器渲染流程

我们编写的JS脚本，需要在浏览器把DOM树结构构建完成以后，才能被正确运行。
如果JS脚本加载完了，页面元素还未被加载成功，则会发生无法运行的处境。

检测方法

onload

在页面的所有资源加载完成时，window对象上会触发一个onload事件。
但是，当资源过多过大时，onload会出现比较严重的延迟问题，严重影响用户体验。

DOMContentLoaded 事件（IE9+）

DOMContentLoaded事件在DOM内容加载完后就触发，无需等待其他资源的加载完成。

然而，万恶的IE低版本并不支持DOMContentLoaded 事件，所以我们只好利用它的onreadystatechange事件以及doScroll方法。

脚本储备

function myReady(fn){      //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式      if ( document.addEventListener ) {          document.addEventListener("DOMContentLoaded", fn, false);      } else {          IEContentLoaded(fn);      }      //IE模拟DOMContentLoaded      function IEContentLoaded (fn) {          var d = window.document;          var done = false;          //只执行一次用户的回调函数init()          var init = function () {              if (!done) {                  done = true;                  fn();              }          };          (function () {              try {                  // DOM树未创建完之前调用doScroll会抛出错误                  d.documentElement.doScroll('left');              } catch (e) {                  //延迟再试一次~                  setTimeout(arguments.callee, 50);                  return;              }              // 没有错误就表示DOM树创建完毕，然后立马执行用户回调              init();          })();          //监听document的加载状态          d.onreadystatechange = function() {              // 如果用户是在domReady之后绑定的函数，就立马执行              if (d.readyState == 'complete') {                  d.onreadystatechange = null;                  init();              }          }      }  }