document.ready小记

简介

JavaScript中的window对象有个事件onload。该事件在页面资源(比如js文件、图片和媒体资源等)加载完成后再执行

如果我们想在DOM文档树加载完之后执行一段代码,该如何做?

实现

JQuery实现

JQuery中提供了一个比较常用的方法,用来在DOM文档树加载完成后自己执行

$(document).ready(function() { // do something })

自定义代码实现

JavaScript没有直接提供类似于ready方法,我们可以自己封装一个

// 封装 (function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; var d = document; d.readydom = function (f) { if (!ie && !wk && d.addEventListener)return d.addEventListener('DOMContentLoaded', f, false); if (fn.push(f) > 1) return; if (ie)(function () { try { d.documentElement.doScroll('left'); run(); } catch (err) { setTimeout(arguments.callee, 0); } })(); else if (wk) var t = setInterval(function () { if (/^(loaded|complete)$/.test(d.readyState)) clearInterval(t), run(); }, 0); }; })(); // 使用 document.readydom(function() { // do something })

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: