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

一、纯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. Visual Studio 调试技巧:10 篇热文汇总

    本文精选了 DotNet  2017年11月份的10篇热门文章.其中有技术分享.技术资源. 注:以下文章,点击标题即可阅读 <Visual Studio的调试技巧 > 调试技巧是衡量程序员 ...

  2. 【tensorflow:Google】三、tensorflow入门

    [一]计算图模型 节点是计算,边是数据流, a = tf.constant( [1., 2.] )定义的是节点,节点有属性 a.graph 取得默认计算图 g1 = tf.get_default_gr ...

  3. 向重复劳动说不!——GMExplorer 1.0 Beta 发布

    下载: GMExplorer 1.0 Beta 计算机网络诞生以来,各项技术日新月异.在浏览器器能做和看到的,早已不止网页了! 特别是近几年HTML5.云服务等技术的兴起,涌向大批优秀的Web应用.人 ...

  4. [Scala]Scala学习笔记三 Map与Tuple

    1. 构造映射 可以使用如下命令构造一个映射: scala> val scores = Map("Alice" -> 90, "Kim" -> ...

  5. Django之 中间件

    中间件 介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.如果你想修改请求,例如被传送到view中的Http ...

  6. ORM版,学生管理系统03

    关于老师信息管理 建立多对多关系 第一种(通过外键建立) 自己写类,自己使其建立关系 缺点: 不能用Django ORM 多对多操作的语法 class Teacher(models.Model): t ...

  7. 通用线程:POSIX 线程详解,第 3 部分

    通用线程:POSIX 线程详解,第 3 部分 使用条件变量提高效率 Daniel Robbins, 总裁兼 CEO, Gentoo Technologies, Inc. 简介: 本文是 POSIX 线 ...

  8. (一)js概述

    1.    js:弱类型,动态类型,解释型的脚本语言. 2.    网景,布兰登艾奇,js和java没有关系,js的标准:ECMAscript. 3.    js组成:ECMAscript + Bom ...

  9. [HAL]5.中断里调用HAL_Delay()进入死循环的原因

    中断里调用HAL_Delay()进入死循环的原因  摘自:http://blog.csdn.net/alwxkxk/article/details/47204677 CUBE生成的程序中, SysTi ...

  10. 在linux中使用shell来分析统计日志中的信息

    在运维工作中,要经常分析后台系统的日志,通过抓取日志中的关键字信息,对抓取结果进行统计,从而为监控结果提供基础数据.下面的shell演示了如何从大量的日志中取得想要的统计结果.其中展示了各种有趣的命令 ...