- 浏览: 166530 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
crabboy:
goodhttp://veerle.duoh.com/comm ...
表格效果 -
lunvsxiao:
好呀,省的自己记那么多了。。
java常用正则表达式
window.onload事件可以安全的执行javascript,因为该事件是在页面完全加载完后才开始执行(包括页面内的图片、flash等所有元素),不会因为JS需要对某个DOM 操作,而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的:如果某些图片(或者一些别的东西)加载特别慢,那么load事件会等到很久之后才会触发。针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。如果不使用这些框架,可以使用这个独立的DomReady.js
小巧独立的Javascript库:DomReady.js
(function(){ var DomReady = window.DomReady = {}; // Everything that has to do with properly supporting our document ready event. Brought over from the most awesome jQuery. var userAgent = navigator.userAgent.toLowerCase(); // Figure out what browser is being used var browser = { version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1], safari: /webkit/.test(userAgent), opera: /opera/.test(userAgent), msie: (/msie/.test(userAgent)) && (!/opera/.test( userAgent )), mozilla: (/mozilla/.test(userAgent)) && (!/(compatible|webkit)/.test(userAgent)) }; var readyBound = false; var isReady = false; var readyList = []; // Handle when the DOM is ready function domReady() { // Make sure that the DOM is not already loaded if(!isReady) { // Remember that the DOM is ready isReady = true; if(readyList) { for(var fn = 0; fn < readyList.length; fn++) { readyList[fn].call(window, []); } readyList = []; } } }; // From Simon Willison. A safe way to fire onload w/o screwing up everyone else. function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } }; // does the heavy work of working through the browsers idiosyncracies (let's call them that) to hook onload. function bindReady() { if(readyBound) { return; } readyBound = true; // Mozilla, Opera (see further below for it) and webkit nightlies currently support this event if (document.addEventListener && !browser.opera) { // Use the handy event callback document.addEventListener("DOMContentLoaded", domReady, false); } // If IE is used and is not in a frame // Continually check to see if the document is ready if (browser.msie && window == top) (function(){ if (isReady) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(error) { setTimeout(arguments.callee, 0); return; } // and execute any waiting functions domReady(); })(); if(browser.opera) { document.addEventListener( "DOMContentLoaded", function () { if (isReady) return; for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].disabled) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions domReady(); }, false); } if(browser.safari) { var numStyles; (function(){ if (isReady) return; if (document.readyState != "loaded" && document.readyState != "complete") { setTimeout( arguments.callee, 0 ); return; } if (numStyles === undefined) { var links = document.getElementsByTagName("link"); for (var i=0; i < links.length; i++) { if(links[i].getAttribute('rel') == 'stylesheet') { numStyles++; } } var styles = document.getElementsByTagName("style"); numStyles += styles.length; } if (document.styleSheets.length != numStyles) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions domReady(); })(); } // A fallback to window.onload, that will always work addLoadEvent(domReady); }; // This is the public function that people can use to hook up ready. DomReady.ready = function(fn, args) { // Attach the listeners bindReady(); // If the DOM is already ready if (isReady) { // Execute the function immediately fn.call(window, []); } else { // Add the function to the wait list readyList.push( function() { return fn.call(window, []); } ); } }; bindReady(); })();
使用方法:
<html lang="en"> <head> <script src="domready.js" type="application/javascript"></script> <script type="application/javascript"> DomReady.ready(function() { alert('dom is ready'); }); </script> </head> <body> </body> </html>
jquery里有专门解决DOM加载的函数$(document).ready()(简写就是$(fn)),非常好用!John Resig在《Pro JavaScript Techniques》里,有这样一个方法处理DOM加载,原理就是通过document&& document.getElementsByTagName &&document.getElementById&& document.body 去判断Dom树是否加载完毕。代码如下:
function domReady( f ) {
// 如果DOM加载完毕,马上执行函数
if ( domReady.done ) return f();
// 假如我们已增加一个函数
if ( domReady.timer ) {
// 把它加入待执行的函数清单中
domReady.ready.push( f );
} else {
// 为页面加载完成绑定一个事件,
// 为防止它最先完成. 使用 addEvent(下面列出).
addEvent( window, “load”, isDOMReady );
// 初始化待执行的函数的数组
domReady.ready = [ f ];
// 经可能快地检查Dom是否已可用
domReady.timer = setInterval( isDOMReady, 13 );
}
}
// 检查Dom是否已可操作
function isDOMReady() {
// 假如已检查出Dom已可用, 忽略
if ( domReady.done ) return false;
// 检查若干函数和元素是否可用
if ( document && document.getElementsByTagName && document.getElementById && document.body ) {
// 假如可用, 停止检查
clearInterval( domReady.timer );
domReady.timer = null;
// 执行所有等待的函数
for ( var i = 0; i < domReady.ready.length; i++ )
domReady.ready[i]();
// 记录在此已经完成
domReady.ready = null;
domReady.done = true;
}
}
// 由 Dean Edwards 在2005 所编写addEvent/removeEvent,
// 由 Tino Zijdel整理
// http://dean.edwards.name/weblog/2005/10/add-event/
//优点是1.可以在所有浏览器工作;
//2.this指向当前元素;
//3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数
//缺点就是仅在冒泡阶段工作
function addEvent(element, type, handler) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
还有一个估计由几个外国大师合作写的,实现同样功能。
/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/
addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were added
while (exec = load_events.shift())
exec();
if (script) script.onreadystatechange = '';
};
return function (func) {
// if the init function was already ran, just run this function now and stop
if (done) return func();
if (!load_events[0]) {
// for Mozilla/Opera9
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")
init(); // call the onload handler
};
/*@end @*/
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState))
init(); // call the onload handler
}, 10);
}
// for other browsers set the window.onload, but also execute the old window.onload
old_onload = window.onload;
window.onload = function() {
init();
if (old_onload) old_onload();
};
}
load_events.push(func);
}
})();
发表评论
-
js event.keyCode
2011-12-02 17:13 674keycode 8 = BackSpace BackSpace ... -
js event.keyCode
2011-12-02 17:06 2keycode 8 = BackSpace BackSpace ... -
IE6下png透明处理心得
2011-11-24 12:41 1264首先说明一下,网上处理IE6下png透明的方法有很多,但无外乎 ... -
不使用中间变量,交换int型的 a, b两个变量的值
2011-02-22 18:08 720(function(){ var a = 10, b ... -
js节点操作
2011-02-11 16:14 796insertAdjacentElement方法 语法: ... -
[JS]URLParser-html页面参数获取类
2010-10-11 09:05 652URLParser类代码 /* @class: ... -
JS函数库 common.js
2010-09-20 15:55 1102/****************************** ... -
简单的加解密
2010-09-12 20:51 610前段时间看到flash中写的一段混淆代码,现记录下,以备后用。 ... -
js排序
2010-09-02 16:37 751<html> <body> ... -
日期的格式化函数(转)
2010-08-17 15:38 634//Date.prototype.isLeapYe ... -
动态加载JS脚本的4种方法
2010-08-05 11:55 502动态加载JS脚本的4种方法 要 ... -
信息提示框
2010-05-17 17:08 1340消息提示封装js /** ------ ... -
关于table等只读标签的innerHTML问题
2010-04-26 17:58 1685function setTbodyHTML(id,tr){ ... -
[转载]100多个很有用的JavaScript函数以及基础写法大集合
2010-04-24 23:17 11581.document.write(""); ... -
网页高亮显示文字
2010-04-15 15:24 1913function hightLight(str,style,f ... -
遍历JSON
2010-04-11 15:11 1550<!DOCTYPE html PUBLIC " ... -
霓虹灯效果
2010-04-09 11:09 1305<!DOCTYPE html PUBLIC &qu ... -
JavaScript 的事件冒泡 demo
2010-03-15 10:11 1210转载: 如果你还不理解JavaScript的事件冒泡往下看: ... -
获得页面的高度(转载)
2010-02-03 21:50 1265function getDocHeight(doc){ / ... -
JS读取并输出xml文件节点及属性
2010-01-19 17:42 2069book.html 代码如下: ++++++++++++ ...
相关推荐
这篇文章给大家介绍vueJs实现DOM加载完成之后自动下拉到底部,文中给大家记录了整个问题的过程,对实现思路感兴趣的朋友大家阅读下本文。 /……………………………….更新………………………………/ 这个问题是很早...
当 DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash onload 当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了 根据执行时DOM是否已经装载完毕来决定是...
处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题;针对这个问题,本文给予适当的解决方法,仅供参考
js实现页面加载完毕之前loading提示效果:在页面上所有的DOM没有加载完毕之前,我们想让页面正中间显示一个“页面加载中,请稍后...”的字样,此效果正是,样式可以根据自己的需求改动!!!
参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:...show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。
做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面这篇文章就给大家介绍了利用JS判断指定dom元素是否在屏幕内的方法实例,需要的朋友可以参考借鉴,下面来一起看看吧。
angular6,div 滚动条判断是否触底,用于滚动加载数据。
判断不同浏览器的页面加载方法 //js是否加载完成 scriptReady:false, //DOM结构是否加载完成 domReady:false,
设计懒加载组件,需要支持以下几个功能:支持自定义定义组件有效范围支持 scroll 事件和 CSS3 transform支持自定义预加载距离提供事件绑定支持组件功能开启和关闭设计思路判断 transfrom 模式下的元素位置移动端元素...
一个比较头疼的事情,有些插件绑定dom对象的,然后又用jq的语法,...function isjQueryLoadend(){//判断JQ是否加载完成没有的话 继续判断 if (typeof $ != 'undefined' && document.body) {//jquery lbt(); } else {
原理 1.通过监听滚动区域DOM的scroll事件, 计算出触底 // 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度 ...3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示 示例 https://code
Vue自定义v-has指令实现按钮权限判断 以后台管理系统为例,每个用户所拥有的按钮权限不一样。管理员配置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据... 譬如,自定义一个v-focus指令,当页面加载时,输
那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕。 有人说使用ng-init=”” 亲测:表示没达到我想要的结果…. 当然你如果使用[removed]=...
这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue...
1. 设置一个标志位用来判断数据是否在加载中 2. 将滚动区域设置成 overfow:auto(显示滚动条) 3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例 4. 当鼠标滚动到底部时,加载数据 4.1 如果此时 标志位为true...
页面初始化中,用的较多的就是$(document)....那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的? 答案就在jquery代码内,假设jquery的版本是jquery-1.11.3.js。 ready的关键代码(3507~3
wex5通过js动态加载dom节点并给节点添加不同的点击事件,循环加载点击事件,通过点击事件出发不同的功能