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: 99999; 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循环执行结束前,动态变更加载进度;循环执行结束,该进度提示实现隐藏