在开发中,不可避免的会需要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();
    }
}

关于loading的更多相关文章

  1. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  2. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  3. eclipse 突然 一直在loading descriptor for XXX (XXX为工程名)Cancel Requested

    问题: eclipse 启动后,啥也不干,就一直在loading descriptor for XXX (XXX为工程名),,其他什么操作都不能操作. 如下图所示,保存文件也无法保存.  这个怎么办? ...

  4. linux使用wkhtmltopdf报错error while loading shared libraries:

    官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...

  5. solr定时更新索引遇到的问题(SolrDataImportProperties Error loading DataImportScheduler properties java.lang.NullPointerException)

    问题描述 报如下错误,很显然,问题原因:空指针异常: ERROR (localhost-startStop-1) [   ] o.a.s.h.d.s.SolrDataImportProperties ...

  6. python3: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory

    安装python3遇到报错: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz ./configure --prefix=/u ...

  7. x01.os.21: print "Loading..."

    Linux Inside 是中文版,值得下载一读. 先把目标设低点,开机进入后,在屏幕上打印“Loading..."即可.由于要在 bochs 中运行,首先就是安装 bochs.Oldlin ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 项目中运行报错: Loading XML bean definitions from class path resource [applicationContext.xml]

    记录一下: org.springframework.context.support.AbstractApplicationContext prepareRefresh Refreshing org.s ...

  10. 一个简单实用的css loading图标

    摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...

随机推荐

  1. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  2. MySQL 5.7.9版本sql_mode=only_full_group_by

    这会导致select中只能出现group by后面出现的表的字段. 其实如果使用其他表的字段,聚合函数对无法对应其他表的字段. 建议放在子查询里. 如果想打破这个规则,可以设置sql_mode变量,将 ...

  3. JS同步与异步;

    JS的同步与异步 同步:代买从上往下的执行 异步:每个模块各执行各的,同时执行,互不干扰 四个异步事件:(1)定时器(2)ajax(3)时间的绑定(4)回调函数 现在用定时器来说一说setTimeOu ...

  4. $.fn.extend() 问:我来这个世上到底是干嘛的?

    好好好 乖  本宝宝来告诉你  你来是干嘛的啊~ 话不多说 直接上码 当然如下代码是在jquery环境下运行的 HTML JS 完事~~~ 当你点击div元素的时候  你会发现弹出来“我被单击了”这句 ...

  5. 从 NCBI 批量下载基因组的方法

    先下载 assembly summary files The assembly_summary files report metadata for the genome assemblies on t ...

  6. rpo攻击

    0 什么是RPO攻击? RPO(Relative Path Overwrite)相对路径覆盖,是一种新型攻击技术,最早由Gareth Heyes在其发表的文章中提出.主要是利用浏览器的一些特性和部分服 ...

  7. JSP :使用<%@include%>报Duplicate local variable path 错误

    今天在做商城页面,遇到问题: <%@include file="menu.jsp" %> 错误提示: Multiple annotations found at thi ...

  8. 【Mybatis】MyBatis配置文件的使用(二)

    本例在[Mybatis]MyBatis快速入门(一)基础上继续学习XML映射配置文件 MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置(settings)和属性(properti ...

  9. 消息模式Toast.makeText的几种常见用法

    Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于 一些帮助 / 提示. Toast 最 ...

  10. Linux环境下java开发环境搭建一 JDK搭建

    第一步:下载jdk压缩文件 第二步:上传到家目录下的soft目录下,可以采用winscp,此处下载的是.tar.gz文件 第三步:解压压缩文件,并在/usr/local目录下创建一个jdk7的目录,并 ...