判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊。

一、纯js方法

// (1)、页面所有内容加载完成执行
window.onload = function(){ } // (2)、ie9以上版本监听事件
if('addEventListener' in document){
document.addEventListener('DOMContentLoaded', function(){ }, false)//false代表在冒泡阶段触发,true在捕获阶段触发
} // (3)、页面加载完毕
document.onreadystatechange = function(){
if(doucument.readyState == 'complete'){
// 页面加载完毕
}
} 注:js方法没有依赖方法简单,但方法(2)存在兼容性问题。

二、jquery方法

$(function(){

})

$(document).ready(function(){
// document 不写默认document
}) 注:jquery方法兼容性好,并且实在dom资源加载完毕的情况下执行,(不包括图片视频资源)

三、vue中

vue的生命周期,mounted加载完毕执行

mounted () {
this.$nextTick(() => {
// 确保dom异步加载完毕
})
}

作用:

1、在页面加载完成之前添加加载动画,提高交互体验

2、在页面加载完成后调用js,防止报错,用户白屏等待事件

js判断页面加载完毕方法的更多相关文章

  1. JS判断页面加载完毕

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

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

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

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

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

  4. Duilib中Webbrowser事件完善使其支持判断页面加载完毕

    在多iframe的页面中,需要结合DISPID_DOCUMENTCOMPLETE和DISPID_NAVIGATECOMPLETE2两个事件判断页面是否加载完毕,而duilib中没有提供对DISPID_ ...

  5. js 判断页面加载状态

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

  6. JS判断页面加载是否完成

    document.onreadystatechange = function()  //当页面加载状态改变的时候执行function {  if(document.readyState == &quo ...

  7. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  8. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  9. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

随机推荐

  1. 【zzulioj-1676】与同学比身高(综合)

    题目链接: http://acm.zzuli.edu.cn/problem.php?id=1676 题目描述 新学年开学了,学校又迎来了一批新同学,已知部分同学之间的身高关系,请列出可推断出的同学之间 ...

  2. HDU 1561 The more, The Better(树形DP+01背包)

    The more, The Better Time Limit : 6000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other ...

  3. 内存保护机制及绕过方案——通过覆盖虚函数表绕过/GS机制

    1    GS内存保护机制 1.1    GS工作原理 栈中的守护天使--GS,亦称作Stack Canary / Cookie,从VS2003起开始启用(也就说,GS机制是由编译器决定的,跟操作系统 ...

  4. UI- 五种手势识别总结

    #pragma mark - 手势  总共有五种手势  分别为 Tap点击 Pan拖拽 LongPress长时间按压 Pinch捏合手势 rotation旋转 1. 定义成员变量 UIImageVie ...

  5. node 一站式 学习 教程

    还是比较全面的, 包括了 : monogoDB的安装 使用 , 各种插件, 中间件的介绍, 路由的介绍, 各种数据库框架的介绍, 测试介绍;  掌握后应该可以开发一个中型的程序, 大型程序因为有性能的 ...

  6. eclipse mars4.5安装hibernate开发环境

    在安装hibernate插件过程中遇到下面前三张图片所示的现象是没关系的,只要最后能看到第四张图的结果就说明安装成功,我一开始不知道走了好多弯路.我用的eclipse mars4.5,采用了在线安装的 ...

  7. 转载的,讲解java.util的集合类

    本文是转载的 http://www.ibm.com/developerworks/cn/java/j-lo-set-operation/index.html#ibm-pcon 在实际的项目开发中会有很 ...

  8. C语言内存对齐对则

    这篇文章讲的非常好  :  http://blog.csdn.net/hairetz/article/details/4084088 用空间换时间, 规则 : 每个数据成员存储的起始位置都要是它的整数 ...

  9. Spring3.x JSR-303

    JSR303介绍 JSR303-Bean Validation描述:This JSR will define a meta-data model and API for JavaBeanTM vali ...

  10. 提示“load System.Core failed”

    Could not load file or assembly 'System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec8 ...