Question

我有一个通过PHP网页抓取生成的页面。由于内容的集合导致延迟，我正在尝试在加载发生时引入引导进度条。

我没有将栏链接到任何实际的加载阶段，我只是运行它3秒然后获取代码隐藏/显示相关的div（第一个div包含加载栏），第二个包含内容）。

我有以下代码但是php-content div立即出现而不是延迟。 chrome中的javascript控制台没有输出。

<script type="text/javascript">
    $(document).ready(function(){
        $("#loader").show();
        $("#php-content").hide();
        counter = 0;
        run();
    });

    function update(value) {
        $("#loadingBar").attr("style","width:"+value+"%");
        $("#loadingBar").attr("aria-valuenow",value);
    }

    function run() {
        if (counter <= 3000) {
            update(counter);
            counter+=10;
            setTimeout(run(), 10);
        } else {
            $("#loader").hide();
            $("#php-content").show();
        }

    }
</script>

HTML部分：

<div id="loader">
                <div class="progress">
                    <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%">
                        <span class="sr-only"></span>
                    </div>
                </div>
            </div>
            <div id="php-content">
                <h2>Current Weather Conditions:</h2>
                <table class="table table-bordered">
                    <?php include 'php/scrape.php' ?>
                </table>
            </div>

更新 - 请参阅下面的答案。在发布此问题后我找到了解决方案。

Answer 1

我的代码有一些细微的变化，我认为它可以帮到你，这里的代码如下

Html代码

<div id="loader">
                <div class="progress">
                    <div id="loadingBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="3000" style="width: 0%">
                        <span class="sr-only"></span>
                    </div>
                </div>
            </div>
            <div id="php-content">
                <h2>Content:</h2>
                <table class="table table-bordered">
                    new content
                </table>
            </div>

Css代码

#loadingBar{background: red;float: left;min-height: 20px;}
#php-content{display:none;}

Jquery代码

jQuery(document).ready(function(){
        jQuery("#php-content").animate({'opacity' : '0'});
        jQuery("#loader").animate({'opacity' : '1'});
        counter = 0;        
        run();
    });

    function update(value) {
        jQuery("#loadingBar").animate({width:value+"px"});
        jQuery("#loadingBar").attr("aria-valuenow",value);
    }


    function run() {        
        if (counter <= 800) {
            jQuery("#loader").animate({'opacity' : '1'});
            jQuery("#php-content").animate({'opacity' : '0'});            
            update(counter);
            counter+=10;
            setTimeout(run(), 10);
        } else {            
            jQuery("#loader").animate({'opacity' : '0'});
            jQuery("#php-content").show();
            jQuery("#php-content").animate({'opacity' : '1'});
        }

    }

演示链接 http://jsfiddle.net/kishan_web/b2jzu4er/

Answer 2

我在此处找到了基于本教程的解决方案 - Animate Progress Bars with Jquery

基本上，我最终只是使用jquery＆＃39; s .attr（）函数将进度条的宽度设置为100％。使用css规则，转换持续时间可以设置为3秒。所有需要做的就是在代码中设置超时，以便在转换发生时停止执行任何其他操作。

脚本（看起来比以前更整洁）：

$(document).ready(function() {
$("#loader").show();
    $("#php-content").hide();
    $("#loadingBar").attr("style", "width:100%");
    setTimeout(function() {$("#php-content").show();$("#loader").hide();}, 3000);
});

CSS：

.progress-bar {
-webkit-transition: width 3s ease-in-out;
transition: width 3s ease-in-out;

}

Javascript更新进度条，然后切换可见的div

2 个答案: