zoukankan      html  css  js  c++  java
  • 关于loading

    在开发中,不可避免的会需要loading的出现,来提高用户体验,

    自己在查找中,总结了两条:

    1、window.onload的时候显示loading,首先loading图片是一直存在的,window.onload函数是在加载完所有dom节点和图片等所有文件才调用的,

    此时的情况就是,在加载的时候,loading图片一直存在,在调用window.onload函数的时候,改变loading的style样式,就ok了;

    <div id="app">
    <div class="load"><img src="img/g3.gif"/></div>
    </div>
    <script type="text/javascript">

    window.onload=function(){
    var load=document.getElementsByClassName('load')[0];
    load.style.cssText ='display:none;
    }
    </script>

    2、第二种就是,在页面中,点击一下加载更多,此时,把loading图片显示,在callback回调函数里再把它隐藏就可以了。

    3(于2017-07-04添加)

    今天早上来的比较早,在吃早饭,既然干不了其他事,就随便打开一视频看,介绍的正好是关于loading的方法,反正自己之前也了解过,

    现在系统的看一下也挺好。结果,还真有收获。

    document.onreadystatechange方法:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

    document.readyState属性

    document.readyState有4个值:

    • uninitialized - 还未开始载入,
    • loading - 载入中
    • interactive - 已加载,文档与用户可以开始交互
    • complete - 载入完成

    一般我们能监测到的是interactive和complete,

    所以就可以判断document.readyState==“complete”,就可以让loading消失了

     实例代码:

    document.onreadystatechange=function(){
      if(document.readyState=='complete'){
        $('.loading').fadeOut();
        }
    }

  • 相关阅读:
    第一个TS文件
    盒子模型
    不稳定的排序算法
    状态码Status Code
    从输入URL到页面加载完成发生了什么?
    JavaScript中var、let、const的区别
    explain 详解 (转)
    HttpServletRequest对象方法的用法 (转)
    数据一致性理解
    logback 使用详解 (转)
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7059876.html
Copyright © 2011-2022 走看看