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 ...
随机推荐
- Visual Studio 调试技巧:10 篇热文汇总
本文精选了 DotNet 2017年11月份的10篇热门文章.其中有技术分享.技术资源. 注:以下文章,点击标题即可阅读 <Visual Studio的调试技巧 > 调试技巧是衡量程序员 ...
- 【tensorflow:Google】三、tensorflow入门
[一]计算图模型 节点是计算,边是数据流, a = tf.constant( [1., 2.] )定义的是节点,节点有属性 a.graph 取得默认计算图 g1 = tf.get_default_gr ...
- 向重复劳动说不!——GMExplorer 1.0 Beta 发布
下载: GMExplorer 1.0 Beta 计算机网络诞生以来,各项技术日新月异.在浏览器器能做和看到的,早已不止网页了! 特别是近几年HTML5.云服务等技术的兴起,涌向大批优秀的Web应用.人 ...
- [Scala]Scala学习笔记三 Map与Tuple
1. 构造映射 可以使用如下命令构造一个映射: scala> val scores = Map("Alice" -> 90, "Kim" -> ...
- Django之 中间件
中间件 介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.如果你想修改请求,例如被传送到view中的Http ...
- ORM版,学生管理系统03
关于老师信息管理 建立多对多关系 第一种(通过外键建立) 自己写类,自己使其建立关系 缺点: 不能用Django ORM 多对多操作的语法 class Teacher(models.Model): t ...
- 通用线程:POSIX 线程详解,第 3 部分
通用线程:POSIX 线程详解,第 3 部分 使用条件变量提高效率 Daniel Robbins, 总裁兼 CEO, Gentoo Technologies, Inc. 简介: 本文是 POSIX 线 ...
- (一)js概述
1. js:弱类型,动态类型,解释型的脚本语言. 2. 网景,布兰登艾奇,js和java没有关系,js的标准:ECMAscript. 3. js组成:ECMAscript + Bom ...
- [HAL]5.中断里调用HAL_Delay()进入死循环的原因
中断里调用HAL_Delay()进入死循环的原因 摘自:http://blog.csdn.net/alwxkxk/article/details/47204677 CUBE生成的程序中, SysTi ...
- 在linux中使用shell来分析统计日志中的信息
在运维工作中,要经常分析后台系统的日志,通过抓取日志中的关键字信息,对抓取结果进行统计,从而为监控结果提供基础数据.下面的shell演示了如何从大量的日志中取得想要的统计结果.其中展示了各种有趣的命令 ...