原生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 ...
随机推荐
- PTA的Python练习题(四)
从 第3章-1 3-1.大于身高的平均值 开始 1. 引入列表的概念 a=list(map(int,input().split())) b=sum(a) c=len(a) d=b/c for i in ...
- Struts笔记二:栈值的内存区域及标签和拦截器
值栈和ognl表达式 1.只要是一个MVC框架,必须解决数据的存和取的问题 2.struts2利用值栈来存数据,所以值栈是一个存储数据的内存结构 1. ValueStack是一个接口,在struts ...
- 4 Action的3种编写方式,pojo,实现和继承(推荐)
Action的访问: 1 Action类是pojo(Plain Ordinary Java Object):简单Java对象,无接口,无继承.例如上篇文章中只创建了public String exec ...
- 寒假作业---蓝桥杯---DFS
题目描述 现在小学的数学题目也不是那么好玩的. 看看这个寒假作业: 每个方块代表1~13中的某一个数字,但不能重复. 比如: 6 + 7 = 13 9 - 8 = 1 3 * 4 = 12 10 ...
- js缓慢运动,Math.ceil向上取整,floor向下取整
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Java基础 -3.3
位运算 指的是可以直接进行二进制数据的计算处理,主要是:与(&).或(|).非(!).异或(^).反码(~).移位处理(>>.<<) 与运算 public class ...
- Java源码-集合-ArrayList
基于JDK1.8.0_191 介绍 在Java中,对于数据的保存和使用有多种方式,主要的目的是以更少的资源消耗解决更多的问题,数组就是其中的一种,它的特点是所有的数据都保存在内存的一段连续空间中, ...
- Windows 控制台命令笔记
1. cmd中输出中文乱码问题: CHCP是一个计算机指令,能够显示或设置活动代码页编号. C:\windows\system32>CHCP 活动代码页: 936 原因是我们使用了GBK编码,下 ...
- vue中 el [$el] 的理解
<template> <div class="a"> <div class="basic" ref="ba"& ...
- 记录:一次使用私有LoadBalance provider,工具metallb的故障排除
使用metallb工具,目的是为私有环境下,不借助GRE或Azure等云商的LB, 通过metallb-system工具IP池给k8s service提供external-ip.但是,由于设置meta ...