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