原生JS 实现 dom ready
记录一下项目技术问题:
记得:放在head标签内的脚本,第一时间执行
var baseTools = {
// dom ready
ready: function( f ){
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;
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);
}
};
以上就是原生JS 实现 dom ready 的方法,接下来是使用:
;(function() {
baseTools.ready(function() {
你想实现的代码
});
})();
原生JS 实现 dom ready的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
随机推荐
- selenium webdriver 常用方法
/** * 判断元素是否存在 * * @param driver * @param by * @return */ public static boolean isElementPresent(Web ...
- fiddler 保存请求数据并发送到自己的服务器接口
通过Rules菜单打开 Customize Rules 搜索 OnBeforeResponse 方法,再方法后面添加如下代码: if (oSession.fullUrl.Contains(" ...
- K8s / Kubernetes 从入门到入门
Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什么是k ...
- swoole 消息队列
<?php /** * 场景: * 监控订单表状态 队列通信 * 一个进程向队列发布消息 另外两个进程争抢 */ //设置主进程名 echo '主进程id:' . posix_getpid() ...
- CSP2019 括号树
Description: 给定括号树,每个节点都是 ( 或 ) ,定义节点的权值为根到该节点的简单路径所构成的括号序列中不同合法子串的个数(子串需要连续,子串所在的位置不同即为不同.)与节点编号的乘积 ...
- UniGUI之提示信息MessageDlg及获得信息Prompt(15)
UniGui的信息弹出框MessageDlg的原型定义如下: procedure MessageDlg(const Msg: string; DlgType: TMsgDlgType; Buttons ...
- 提高unigui开发效率的两个方法(02)
1.编译时自己退出运行的程序. 在做unigui开发时,每次编译运行时,unigui的应用都会在后台运行,每次重新编译时都必须手工在任务栏里将应用退出才行,非常麻烦,可以在项目编译的参数里加上杀进程的 ...
- Python - metaclass元类
参考 https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014319106919 ...
- 搜索栏UISearchBar的使用
本文结构: 1.首先是对UISearchBar的简介文字 2.初始化展现UISearchBar,并解析它的结构 3.属性.方法.代理等的一一介绍 4.日常的使用,包括单独对UISearchBar的配置 ...
- PyCharm破解安装方法
1.在3322下载站下好压缩包之后,直接点击安装文件“pycharm-professional-2018.1.exe”进行安装,默认点击“next”下一步进行操作2.选择文件所创建的位置.位置可以选择 ...