如何让页面加载完成后执行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中链式调用之研习
Apr 07 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
jQuery的文档处理程序详解
May 10 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS运算符简单用法示例
Jan 19 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php获取访问者IP地址汇总
2015/04/24 PHP
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python入门之后再看点什么好?
2018/03/05 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
廉政承诺书
2015/01/19 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
党支部综合考察意见
2015/06/01 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL