01.判断页面加载完成的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>判断Dom加载完毕</title>
<mce:script type="text/javascript" language="javascript"><!--
function domReady(f) {
//如果Dom已经加载,立即执行函数
if (domReady.done) { return f(); }
//增加一个函数判断Dom是否加载完毕
if (domReady.timer) {
domReady.ready.push(f); //把它加入待执行函数清单中
} else {
//为页面加载完毕绑定一个事件
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](); }
//记录Dom加载完成的标识
domReady.ready = null;
domReady.done = true;
}
}
//添加事件函数
function addEvent(element, type, handler) {
if (!handler.$$guid) {
handler.$$guid = addEvent.guid++; //为每一个事件处理函数赋予一个独立的ID
}
//为元素建立一个事件类型的散列表
if (!element.events) {
element.events = {};
}
//为没对元素/事件建立一个事件处理函数的散列表
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
//存储已有的事件处理函数(如果已存在一个)
if (element["on" + type]) {
handelers[0] = element["on" + type];
//在散列表中存储该事件的处理函数
handelers[handler.$$guid] = handler;
//赋予一个全局事件处理函数来处理所有工作
element["on" + type] = handleEvent;
};
//创建独立ID的计数器
addEvent.guid = 1;
function removeEvent(element, type, handler) {
//从散列表中删除事件处理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
function handleEvent(event) {
var returnValue = true;
//获取事件对象(IE使用全局的事件对象)
event = event || fixEvent(window.event);
//获取事件处理函数散列表的引用
var handlers = this.events[event.type];
//依次执行每个处理函数
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
//增加一些IE事件对象缺乏的方法
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
}
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
}
}
}
}

// --></mce:script>
<mce:script type="text/javascript" language="javascript"><!--
//测试使用
domReady(function () {
alert("判断Dom是否可用:Dom可用!")
});

// --></mce:script>
</head>
<body>
</body>
</html>

时间: 2024-11-02 15:33:07

01.判断页面加载完成的方法的相关文章

初学angularjs,想知道angularjs如何判断页面加载完成?

问题描述 初学angularjs,想知道angularjs如何判断页面加载完成? 初学angularjs,想知道angularjs如何判断页面加载完成? 解决方案 page.loaded事件

php简单计算页面加载时间的方法_php技巧

本文实例讲述了php简单计算页面加载时间的方法.分享给大家供大家参考.具体实现方法如下: 简单的把开始时间放在页面头部,结束时间放在页面尾部,计算页面加载时间 $start = time(); // put a long operation in here sleep(2); $diff = time() - $start; print "This page needed $diff seconds to load :-)"; // if you want a more exact v

推荐十大优化页面加载速度的方法

许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系.另外,谷歌的排名算法中也把页面加载速度作为其中一项考 虑因素.因此,你网站的页面加载时间是至关重要的.从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面. 小于2秒的页载入时间被认为是优良的,而且高达4秒是可接受的.而大于5秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验.这里列出了10种方法,可以快速提升你网站的性能. 1. 优化图像 图像对于吸引访客的关注是很重要的.但

JS判断页面加载状态以及添加遮罩和缓冲动画的代码_javascript技巧

复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

js判断图片加载完成后获取图片实际宽高的方法_javascript技巧

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

javascript判断图片是否加载完成的方法推荐_javascript技巧

load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 jquery方法 <script type="text/javascript"> $(function(){ $('.pic1').each(fun

JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

jQuery页面加载初始化的3种方法(推荐)_jquery

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种:   $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQu

jquery跟js初始化加载的多种方法及区别介绍

 jquery是等待页面加载完数据,以及页面部分元素:js是页面全部加载完成才执行初始化加载,具体示例祥看本文 jquery和js初始化加载页面的区别:  jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频),    js:是页面全部加载完成才执行初始化加载.    1.jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,    第一种(比较常用):  代码如下: $.function(){  alert("第一种方法");  });    第二