Question

我有一个充当计时器的jQuery UI进度条。但是，当我打开页面时，它只是“正在加载...”（在html中添加）而没有其他内容。

文件链接

HTML文件：http://pastebin.com/Re0ZKVNY

Javascript文件：http://pastebin.com/zynA5MnY

我似乎无法发现代码有任何问题。试过的副本＆amp;从jQuery UI演示中粘贴代码，但似乎没有任何东西可以使它工作（使用我的代码。）。

Answer 1

你似乎做错了一些事情：

您正在尝试使用jQuery UI Progressbar小部件，但您正在使用CSS设置进度条的宽度（实际操作通常的HTML DIV元素
您的一些代码会立即执行，而某些代码会在就绪事件

This is some simplified example 不使用jQuery UI进度条，而是使用您实际使用的自定义解决方案。

但基本上让我也修改你的代码并移动它所属的所有内容：

// Progressbar Stuff
$(function() {
    /* don't need this
    $( "#loading" ).progressbar({
        value: 0
    });
    */

    //increment progressbar
    var loading = $('#loading');
    width = 0; //loading.width();

    var interval = setInterval(function() {

        width++;
        loading.width(width + '%');

        if (width >= 100) {
            clearInterval(interval);
            loadContent();
        }
    }, 75);


    // Fade Out, load content, fade in.
    function loadContent() {
      $("#loadcontent").fadeOut("slow", function(){
        $("#content").load("./content/main.html",false, function() {
          $("#content").fadeIn("slow");
        });
      })
    }

});

替代

由于您在间隔中所做的一切似乎都是动画进度条，因此仅let jQuery do the animation似乎是合理的。而且，由于你每75毫秒递增一次进度条，并且在加载内容之前需要100步，所以你应该将动画运行7500毫秒。它还使进度条运行更顺畅。

$(function() {
    // animate progress bar
    $("#loading").width(0).animate(
        {
            width: "100%" // animate what
        },
        75 * 100, // for how long (100 steps per 75ms)
        "linear", // how to animate it
        function() { // what to do afterwards
            // replace with your own functionality
            alert("Load content");
        }
    );
});

进度条没有出现

1 个答案:

替代