如何让页面加载完成后执行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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
文件编码导致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
简单的页面缓冲技术
2006/10/09 PHP
PHP Reflection API详解
2015/05/12 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python实现三次样条插值
2018/12/17 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
《太阳》教学反思
2014/02/21 职场文书
学校对教师的评语
2014/04/28 职场文书
会议新闻稿
2015/07/17 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
python函数的两种嵌套方法使用
2022/04/02 Python