原生domReady封装

核心思路:

标准浏览器(含IE9+)比较简单,直接监听DOMContentLoaded事件;

低版本的IE(IE678)两套机制:

1)尝试轮询document.documentElement.doScroll("left")是否报错,若报错则dom树结构未ready,否则dom
ready;

2)监听document的onreadystatechange事件,判断document.readyState是否为"complete"。

参考:http://javascript.nwbox.com/IEContentLoaded/

直接上源码了:


    var domReady = (function () {
var doc = document,
branch = document.addEventListener ? ‘w3c‘ : ‘ie678‘;

var _domReady = {
// When _domReady.done is true,all ‘fn‘ will be invoked immediately.
done: false,
// The stack which all functions will be pushed into
fn: [],
// push callback functions
push: function (fn) {
if (!_domReady.done) {
// only bind once
if (_domReady.fn.length === 0) {
_domReady.bind();
}
_domReady.fn.push(fn);
} else {
fn();
}
},
// The Real DOMContentLoaded Callback Function
ready: function () {
// Flag DOMContentLoaded Event was Done over
_domReady.done = true;

var fn = _domReady.fn;
for (var i = 0, l = fn.length; i < l; i++) {
fn[i]();
}

_domReady.unbind();
_domReady.fn = null;
},
bind: {
w3c: function () {
doc.addEventListener(‘DOMContentLoaded‘, _domReady.ready, false);
},
//IE的监听
ie678: function () {
var done = false,
// only fire once
init = function () {
if (!done) {
done = true;
_domReady.ready();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
doc.documentElement.doScroll(‘left‘);
} catch (e) {
setTimeout(arguments.callee, 20);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
doc.onreadystatechange = function () {
if (doc.readyState == ‘complete‘) {
doc.onreadystatechange = null;
init();
}
};
}
}[branch],
unbind: {
w3c: function () {
doc.removeEventListener(‘DOMContentLoaded‘, _domReady.ready, false);
},
ie678: function () { /* Nothing to do */
}
}[branch]
};

return _domReady.push;
})();

使用方法:

可以尝试跟window.onload做个比较


    window.onload = function(){
alert("onload");
};

domReady(function(){
alert("domReady 1");
});

domReady(function(){
alert("domReady 2");
});

原生domReady封装

时间: 2024-10-08 09:05:20

原生domReady封装的相关文章

原生js封装ajax:传json,str,excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

React-Native开发之原生模块封装(Android)升级版

 本文主题:如何实现原生代码的复用,即如何将原生模块封装. 有时候我们的应用需要进行访问原生平台系统的API接口,但是React Native可能还没有封装相应功能组件.还有可能我们需要 去复用一些原生java代码而不是让JavaScript重新去实现一遍.或者我们可能需要些一些更加高级的功能代码,所线程相关的.例如: 图片处理,数据库以及一些高级功能扩展之类的. React Native平台的开发其实本身也是可以让你写纯原生代码并且还可以让你访问原生平台的功能.这是一个比较高级的功能不 过官方

原生Js封装的弹出框

<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title> <style type="text/css"&

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre