js设置加载进度提示
CreateTime--2017年8月23日09:17:46
Author:Marydon
js设置加载进度提示
第一部分:CSS
/*加载样式*/
.Loading {
position: absolute;
left: 43%;
top: 35%;
width: 140px;
height: 50px;
text-align: center;
background: #FAFAFF url(images/loading.gif) no-repeat 10px center;
z-index:;
border: solid 1px #a9a9a9;
}
/*加载展示文本样式*/
.LoadingText {
position: absolute;
top: 20px;
left: 40px;
bottom: 5px;
text-aligh: center;
width: 80px;
}
第二部分:HTML
<div class="Loading" id="PageLoading" style="display: none;"><div class="LoadingText" id="schedule">正在加载中...</div></div>
<div style="display: none" id="fileNamePool">
<c:forEach var="fileName" items="${model.fileNames}">
<input type="hidden" value="${fileName }" />
</c:forEach>
</div>
第三部分:JAVASCRIPT
window.onload=function (){
// 1.使用EL表达式获取后台返回数据:文件路径
var filePath = "${model.filePath}";
// 2.获取页面上指定区域的隐藏域
var inputTags = $('#fileNamePool input:hidden');
// 3. 使用dcm插件批量打开文件
$('#PageLoading').show();
for (var i = 0; i < inputTags.length; i++) {
// 3.1 获取文件名称
var fileName = inputTags[i].value;
// 3.2 设置文件访问路径
var path = "<%=basePath%>" + filePath;
path += "/" + fileName;
// 3.2 添加要打开的文件
document.getElementById("myMovieName").OpenImage(path,"dcm",fileName,"d:\\temp",0);
// 3.3 设置加载进度
var percent = Math.round((i+1) / inputTags.length * 10000) / 100 + "%";
$get('schedule').innerHTML = '已加载' + percent;
}
$('#PageLoading').hide();
}
实现效果:
for循环执行结束前,动态变更加载进度;循环执行结束,该进度提示实现隐藏
js设置加载进度提示的更多相关文章
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS -- 异步加载进度条
今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...
- js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- JS网页加载进度条
参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
- iOS UIWebView 加载进度条的使用-WKWebView的使用,更新2017.6.26
1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...
- 用document.readyState实现网页加载进度条
概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...
- 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
随机推荐
- POJ 3660 Cow Contest (dfs)
Cow Contest Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11129 Accepted: 6183 Desc ...
- 【费用流】BZOJ1877[SDOI2009]-晨跑
[题目大意] Elaxia每天从寝室出发跑到学校,保证寝室编号为1,学校编号为N. Elaxia的晨跑计划是按周期(包含若干天)进行的,由于他不喜欢走重复的路线,所以在一个周期内,每天的晨跑路线都不会 ...
- Android中Acition和Category常量表
Action Action常量 对应字符串 简单说明 ACTION_MAIN android.intent.action.MAIN 应用程序入口 ACTION_VIEW android.intent. ...
- ConcurrentHashMap(Java8)源码分析
1. 常量.成员变量 private static final int MAXIMUM_CAPACITY = 1 << 30; // 和HashMap一样 private static f ...
- jquery ajax 的封装
var tooAjaxData = new Object(); tooAjaxData = function () { this.AjaxUrl =" ";}; bookInfoC ...
- [转]SSH整合 简单的增删改查
Database 使用 Mysql , 建立User 表 CREATE TABLE `user` ( `id` int(11) NOT NULL, `firstName` varchar(20) ...
- WebService基于SoapHeader实现安全认证(二)
支持通过Http请求方法调用webservice,同时支持SoapHeader验证. using Globalegrow.Common; using Globalegrow.Model; using ...
- pca主成份分析方法
1.应用pca的前提 应用pca的前提是,连续信号具有相关性.相关性是什么,是冗余.就是要利用pca去除冗余. 2.pca的定义 pca是一种去除随机变量间相关性的线性变换.是一种常用的多元数据分析方 ...
- EasyUI numbox输入框,金额格式化显示
1.HTML文件 <th id="sellerHopePrices_Th">委托方保留价:</th> <td id="sellerHopeP ...
- 【好】strong-password-checker,我自己做出来的:)
我自己做出来的,分了几种情况来考虑.(再后面有加了注释的版本) https://leetcode.com/problems/strong-password-checker/ // 加油! public ...