通用的页面加载后再运行JS有两种方式:1、在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS。   2、在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS

1、在DOM加载后,全部内容加载前运行

这种方式在同一文件中可以运行多个且不会覆盖。

由于在$(document).ready()方法只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用Jquery中 load()方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){});
$().ready(function(){})  //简写 当$()不带参数时默认就是document
$(function(){});       //简写

2、在全部内容加载后运行

这种方式中只能执行一个 onload代码,当文件由多个onload或者load,只加载最后一个,前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){};    // —-js
$(window).load(function(){});   //---jquery

3、DOM文档加载步骤

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload

JS在页面加载之后运行的更多相关文章

  1. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  2. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  3. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  4. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  5. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  6. js中页面加载完成后执行的几种方式及执行顺序

    1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...

  7. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  8. js中页面加载完成后执行的几种方法及执行顺序

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  9. js 判断页面加载状态

    //----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function ...

随机推荐

  1. 牛客网编程练习(华为机试在线训练)-----求int型正整数在内存中存储时1的个数

    题目描述 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 示例1 输入 5 输出 2 P ...

  2. 详细理解JS中的继承

    正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...

  3. spring cloud服务间调用feign

    参考文章:Spring Cloud Feign设计原理 1.feign是spring cloud服务间相互调用的组件,声明式.模板化的HTTP客户端.类似的HttpURLConnection.Apac ...

  4. Vagrant 手册之同步目录 - 基本用法

    原文地址 - 概述 原文地址 - 基本用法 同步目录 Synced folder 支持在宿主机和客户机之间共享目录,从而允许你在宿主机的项目文件上工作,但是可以在客户机上编译并运行. 默认情况下,Va ...

  5. Spring MVC浅析

    讲到MVC,想必大家都很熟悉,就是将数据模型.视图.控制器进行分离,做到分工明确,在Spring的帮助下,Spring MVC 更是做到了充分的解耦,因为大部分的资源都由Spring进行管理,为Spr ...

  6. numpy.meshgrid的理解以及3D曲面图绘制(梯度下降法实现过程)

    相关概念: 1.x向量和y向量 import numpy as np import matplotlib.pyplot as plt x = np.array([[0,1,2,3], [0,0,0,0 ...

  7. 初识内存分配ByteBuf

    初识ByteBuf: ByteBuf 是Netty 整个结构里面最为底层的模块,主要负责把数据从底层IO 里面读到ByteBuf,然后传递给应用程序,应用程序处理完成之后再把数据封装成ByteBuf ...

  8. 什么是SpringMvc

    1.什么是SpringMvc? SpringMvc是spring的一个模块 基于MVC的一个框架 无需中间整合层来整合 什么是MVC ?mvc在b/s下的应用: 首先请求发送request请求到C(c ...

  9. 获取Linux内核未导出符号的几种方式

    从Linux内核的2.6某个版本开始,内核引入了导出符号的机制.只有在内核中使用EXPORT_SYMBOL或EXPORT_SYMBOL_GPL导出的符号才能在内核模块中直接使用.然而,内核并没有导出所 ...

  10. Linux统计文件内容

    wc:统计文件的行数.单词数.字节数(word count) - wc char.txt:统计出文件char.txt的换行符个数.单词数.字节数 (char.txx有14行.13个单词.66字节) - ...