window.onload 加载完毕的问题及解决方案（上）

解决方法，
一、Mozilla 提供了一个非公开的(undocumented)函数：


代码如下:

// for Mozilla browsers
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

二、对于 IE 浏览器，可以使用IE特有的 defer 属性：


代码如下:

<script defer type="text/javascript">
alert("DOM 加载完毕！")
</script>

具有defer属性的脚本块会在DOM 加载完毕后执行。
非IE浏览器会忽略 defer 而直接执行 script 代码，因此，你可以有两种办法来屏蔽非IE浏览器执行这段针对IE的代码：
1.条件注释


代码如下:

<!--[if IE]>
<script defer type="text/javascript">
alert("DOM 加载完毕！")
</script>
<![endif]-->

2.条件编辑


代码如下:

<script defer type="text/javascript">
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
alert("DOM 加载完毕！");
/*@end @*/
</script>

三、对于Safari，这里有一个jQuery的解决方案：


代码如下:

if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // call the onload handler
}
}, 10);
}

赞 (0)

相关推荐

  • JS:window.onload的使用介绍

    1.最简单的调用方式 直接写到html的body标签里面,如: 复制代码 代码如下: <html> <body onload="func()"> </body> </html> 2.在JS语句调用 复制代码 代码如下: <script type="text/javascript"> function func(){--} window.onload=func; </script> 3.同时 调用

  • jquery中的$(document).ready()与window.onload的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

  • window.onload的页面加载技巧

    把两段代码分别测试后发现不带括号的window.onload在页面加载后显示了正确的效果. 我想window.onload也相当于一个触发事件,如果函数加了括号那就直接先执行函数,再加载body.而不加括号,则相当于将一个函数当作变量赋值到window.onload上,并不立即加载. 代码一: window.onload = doIt(); function doIt() { var oDiv = document.getElementById("div1"); alert (oDiv

  • window.onload绑定多个事件的两种解决方案

    前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. 复制代码 代码如下: window.onload = myFunction; 问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法 方案一 创建一个匿名函数,来容纳需要绑定的多个事件,再讲这个匿名函数绑定到onload事件上 window.onload = function(){ firstFunction(); secondFunction()

  • 页面中body onload 和 window.onload 冲突的问题的解决

    1.使用attachEvent给onload添加所需运行的函数 复制代码 代码如下: if (document.all) { window.attachEvent('onload', FuncName) } else { window.addEventListener('load', FuncName, false); } 2.使用window.onload = function(){FuncName1(); FuncName();},直接onload两个函数.可以加一个判断, 复制代码 代码如

  • jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • js window.onload 加载多个函数的方法

    用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: 复制代码 代码如下: function t(){ alert("

  • window.onload 加载完毕的问题及解决方案（下）

    接上篇,其它方法: 一.在IE中还可以在onreadystatechange事件里进行判断 http://www.thefutureoftheweb.com/blog/adddomloadevent 这里有Jesse Skinner写了一段独立的脚本函数来解决各种浏览器的onload问题,. http://img.jb51.net/jslib/adddomloadevent.js 复制代码 代码如下: /* * (c)2006 Jesse Skinner/Dean Edwards/Matthia

  • 浅析document.ready和window.onload的区别讲解

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在"javascript执行顺序里"http://www.jb51.net/article/44577.htm一文里有详细介绍. jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码: 复制代码 代码如下: <!--   $(document).ready(

  • window.onload 加载完毕的问题及解决方案（上）

    解决方法, 一.Mozilla 提供了一个非公开的(undocumented)函数: 复制代码 代码如下: // for Mozilla browsers if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } 二.对于 IE 浏览器,可以使用IE特有的 defer 属性: 复制代码 代码如下: <script defer type="t

  • js window.onload 加载多个函数和追加函数详解

    平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: function t

  • 同时使用n个window onload加载实例介绍

    复制代码 代码如下: /* 1.obj相当于window 2.type相当于onload 3.fn相当于匿名函数 */ function addEvent( obj,type,fn ){ var saved = null; // 用户保存上一个事件 if( typeof obj[ "on" + type ] == "function" ){ saved = obj[ "on" + type ]; // 用户保存上一个事件 }; // 执行事件  

  • js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

    js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

    本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =

  • jquery实现在页面加载完毕后获取图片高度或宽度

    日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:

  • 页面加载完毕后滚动条自动滚动一定位置

    昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效: 想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子: $("html,body").animate({"scrollLeft

  • 两种方法实现在HTML页面加载完毕后运行某个js

    js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery文件. 复制代码 代码如下: <script type="text/javascript"> $(documen

  • JavaScript & jQuery完美判断图片是否加载完毕

    众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例如我的图片地址: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg 而图片下载到本地是需要一定时间的(网速快的路过).当图片还没有下载完的时候,使用js获取到元素的宽高将会是0. 有的同学说了我

随机推荐