如何让页面加载完成后执行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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery知识点整理
Jan 30 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
openlayers实现地图弹窗
Sep 25 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php提示undefined index的几种解决方法
2012/05/21 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
实例讲解PHP表单处理
2019/02/15 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python编程实现归并排序
2017/04/14 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
写好自荐信的技巧
2013/11/08 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
个人年度总结报告
2015/03/09 职场文书
应收账款管理制度
2015/08/06 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android