关于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();
}
}
关于loading的更多相关文章
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- eclipse 突然 一直在loading descriptor for XXX (XXX为工程名)Cancel Requested
问题: eclipse 启动后,啥也不干,就一直在loading descriptor for XXX (XXX为工程名),,其他什么操作都不能操作. 如下图所示,保存文件也无法保存. 这个怎么办? ...
- linux使用wkhtmltopdf报错error while loading shared libraries:
官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...
- solr定时更新索引遇到的问题(SolrDataImportProperties Error loading DataImportScheduler properties java.lang.NullPointerException)
问题描述 报如下错误,很显然,问题原因:空指针异常: ERROR (localhost-startStop-1) [ ] o.a.s.h.d.s.SolrDataImportProperties ...
- 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 ...
- x01.os.21: print "Loading..."
Linux Inside 是中文版,值得下载一读. 先把目标设低点,开机进入后,在屏幕上打印“Loading..."即可.由于要在 bochs 中运行,首先就是安装 bochs.Oldlin ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 项目中运行报错: Loading XML bean definitions from class path resource [applicationContext.xml]
记录一下: org.springframework.context.support.AbstractApplicationContext prepareRefresh Refreshing org.s ...
- 一个简单实用的css loading图标
摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...
随机推荐
- fabric 持久化
每个容器都有目录需要映射出来.在volume中添加如下映射即可: peer是: /var/hyperledger/peer{number}/org{number}:/var/hyperledger/p ...
- 回溯算法_ BackTracking
目前还存在的疑问: 1. 所谓的该分支满足条件之后就回退到上一层节点,可是加谁呢? x[i+1] ?? 加到 N, 不满足target sum条件就返回上一级(同时改变上一级数为 i+1...纵向 ...
- 利用springloaded进行java class动态替换
我们知道对于一个java文件,如Test.java,首先需要通过javac命令(javac Test.java)进行编译,生成class文件,再将class文件在jvm上进行加载运行,也就是java命 ...
- Netsharp总体设计
阅读本文请先阅读如下两篇文章 什么是企业软件 Netsharp什么 Netsharp总体设计 1.1 Netsharp终端形式 Netsharp基于.NET平台,支持的产品形态有三种: 北极熊 ...
- Android使用ksoap2调用C#中的webservice实现图像上传
目录: 一. android使用ksoap2调用webservice 二. 异步调用 三. Android使用ksoap2调用C#中的webservice实现图像上传参考方法 四. 图像传输中Base ...
- RISC与CISC比较
1.RISC与CISC的差异 处理器的指令集可简单分为2种,CISC(complex instruction set computer)以及RISC(reduced instruction set c ...
- C++ MFC棋牌类小游戏day6
双人单机小游戏做完了,规则那部分还没介绍,暂时不打算介绍了,因为写的这个bug太多,我打算重新修改. 链接:https://pan.baidu.com/s/1XQKPSv0Tw36Qi2TeaRJiM ...
- 搭建repo服务器和上传源码
https://blog.csdn.net/qq_28449863/article/details/79992191 https://blog.csdn.net/qq_28449863/article ...
- http错误代码提示
1×× 保留 2×× 表示请求成功地接收 3×× 为完成请求客户需进一步细化请求 4×× 客户错误 5×× 服务器错误 200 正常:请求已完成. 201 正常:紧接 POST 命令. 202 ...
- 描述linux下文件删除的原理
Linux文件删除原理: Linux是通过link的数量来控制文件删除的,只有当一个文件不存在任何link的时候,这个文件才会被删除. 一般来说,每个文件都有2个link计数器:i_count 和 i ...