如何让页面加载完成后执行js


Posted in Javascript onJune 26, 2013

在很多情况下,js代码需要设置为在页面加载之后才去执行,如果在页面没有加载完毕就执行js代码,很容易出现报错情况,因为页面中的某些dom根本没有加载完毕。本文章向大家介绍如何让js脚本在页面加载完后再执行的几种方法。需要的朋友可以参考一下。

javascript 当页面dom模型加载完成后才执行javascript

不能使用<body onload="">

加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活

<!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>无标题文档</title>
</head>
<body>
<script defer="defer">
alert("页面加载完我才执行的")
</script>
先看到这段话 然后再执行上面的 JS 如果去掉上面的 defer="defer" 那么会先执行JS 在看到这段话
</body>
</html>

方法1:使用defer

<script defer="defer" language="javascript"></script>
//或者
<script defer language="javascript"></script>

但这种方法只有IE支持,其他浏览器不识别defer 这种方法不靠谱
 
方法2:window.onload

<script type=”text/javascript”>
window.onload=function (){
  var userName=”xiaoming”;
  alert(userName);
}
</script>

但这个方法在IE中只能在一个地方调用,假如2个地方调用,后面调用的就会把前面的添加的覆盖掉; 

方法3:jQuery方法,需要引用jQuery文件。

<script type=”text/javascript”>
$(document).ready(function (){
  var userName=”xiaoming”;
  alert(userName);
});
</script>

下面我们介绍一下Window.onload=function (){}与$(document).ready(function (){})的区别:
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
那么Jquery里面$(document).ready函数的内部是怎么实现的呢?下面我们就来看看:
我们来为document添加一个ready函数:

document.ready = function (callback) {
      ///兼容FF,Google
      if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function () {
          document.removeEventListener('DOMContentLoaded', arguments.callee, false);
          callback();
        }, false)
      }
       //兼容IE
      else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function () {
           if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                callback();
            }
        })
      }
      else if (document.lastChild == document.body) {
        callback();
      }
    }

document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”:

window.onload = function () {
      alert('onload');
    };
    document.ready(function () {
      alert('ready');
    });

执行这段代码之后,你会看到浏览器里面会先弹出“ready”,在弹出onload。
这个大家还是亲手试试吧!

Javascript 相关文章推荐
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
文件编码导致jquery失效的解决方法
Jun 26 #Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 #Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 #Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 #Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 #Javascript
解析jquery获取父窗口的元素
Jun 26 #Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 #Javascript
You might like
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python模块之re正则表达式详解
2017/02/03 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python去掉空白行的多种实现代码
2018/03/19 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python矩阵的转置和逆转实例
2018/12/12 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Python装饰器结合递归原理解析
2020/07/02 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
护理职业生涯规划书
2014/01/24 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
单位委托书范本
2014/04/04 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
爬山的活动方案
2014/08/16 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书