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

  • 相关阅读:
    下一周计划
    strategy模式
    Roc加载模块过程
    博客园开通了
    MO sample中的缓冲冲区的例子很简单的一个例子
    作为一个想成为程序员的人来说
    试试用live writer写博客到博客园
    Tomcat崩溃,无法访问
    The class Form1 can be designed, but is not the first class in the file.
    Exception in thread "Timer0" java.lang.NullPointerException
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/7416506.html
Copyright © 2020-2023  润新知