js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊。
一、纯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判断页面加载完毕方法的更多相关文章
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- Duilib中Webbrowser事件完善使其支持判断页面加载完毕
在多iframe的页面中,需要结合DISPID_DOCUMENTCOMPLETE和DISPID_NAVIGATECOMPLETE2两个事件判断页面是否加载完毕,而duilib中没有提供对DISPID_ ...
- js 判断页面加载状态
//----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function ...
- JS判断页面加载是否完成
document.onreadystatechange = function() //当页面加载状态改变的时候执行function { if(document.readyState == &quo ...
- JS判断图片加载完成方法
javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
随机推荐
- 【zzulioj-1676】与同学比身高(综合)
题目链接: http://acm.zzuli.edu.cn/problem.php?id=1676 题目描述 新学年开学了,学校又迎来了一批新同学,已知部分同学之间的身高关系,请列出可推断出的同学之间 ...
- HDU 1561 The more, The Better(树形DP+01背包)
The more, The Better Time Limit : 6000/2000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other ...
- 内存保护机制及绕过方案——通过覆盖虚函数表绕过/GS机制
1 GS内存保护机制 1.1 GS工作原理 栈中的守护天使--GS,亦称作Stack Canary / Cookie,从VS2003起开始启用(也就说,GS机制是由编译器决定的,跟操作系统 ...
- UI- 五种手势识别总结
#pragma mark - 手势 总共有五种手势 分别为 Tap点击 Pan拖拽 LongPress长时间按压 Pinch捏合手势 rotation旋转 1. 定义成员变量 UIImageVie ...
- node 一站式 学习 教程
还是比较全面的, 包括了 : monogoDB的安装 使用 , 各种插件, 中间件的介绍, 路由的介绍, 各种数据库框架的介绍, 测试介绍; 掌握后应该可以开发一个中型的程序, 大型程序因为有性能的 ...
- eclipse mars4.5安装hibernate开发环境
在安装hibernate插件过程中遇到下面前三张图片所示的现象是没关系的,只要最后能看到第四张图的结果就说明安装成功,我一开始不知道走了好多弯路.我用的eclipse mars4.5,采用了在线安装的 ...
- 转载的,讲解java.util的集合类
本文是转载的 http://www.ibm.com/developerworks/cn/java/j-lo-set-operation/index.html#ibm-pcon 在实际的项目开发中会有很 ...
- C语言内存对齐对则
这篇文章讲的非常好 : http://blog.csdn.net/hairetz/article/details/4084088 用空间换时间, 规则 : 每个数据成员存储的起始位置都要是它的整数 ...
- Spring3.x JSR-303
JSR303介绍 JSR303-Bean Validation描述:This JSR will define a meta-data model and API for JavaBeanTM vali ...
- 提示“load System.Core failed”
Could not load file or assembly 'System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec8 ...