Javascript 进度条不出现

我有一个jQueryUIProgressBar作为计时器。然而，当我打开页面时，它所拥有的只是“加载…”（以html添加），而没有其他内容

指向文件的链接

HTML文件：

Javascript文件：

---

我似乎找不到密码有什么问题。尝试从jQuery UI演示中复制和粘贴代码，但似乎没有任何效果（使用我的代码）。

您似乎做了一些错误的事情：

• 您正在尝试使用jQuery UI Progressbar小部件，但您正在使用CSS设置进度条的宽度（CSS实际上操作常见的HTML

  DIV

  元素）
• 有些代码会立即执行，有些则会在事件准备就绪时执行

并没有使用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");
        });
      })
    }

});

可供替代的 因为你在你的时间间隔内所做的一切似乎都是为进度条设置动画，所以取而代之似乎是合理的。而且，因为你每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");
        }
    );
});

---

您是否尝试过将所有代码放在ready函数中？可能是您的#load元素在脚本执行时没有准备好（因为所有计时器和淡入淡出功能都会立即开始执行）。您还应该决定是使用jQuery UI进度条还是使用CSS设置元素（因此不使用jqui进度条）@RobertKoritnik我对javascript不太在行，所以请你发布javascript。我打算使用jQuery UI样式，但只是将progressbar图像替换为动画。如果你只需要视觉样式，而不只是设置适当的CSS类。不需要所有客户端功能。还是一样，不是吗ng.@Adam543i:我建议你看看我在JSFIDLE上的代码，因为它确实有效。尤其是我的替代方法，因为当你可以让jQuery为你做动画时，你不需要做动画。@Adam543i:当然，它什么也不做，因为你的javascript文件有错误。看第10行，更改逗号to semicollon@Adam543i：您现在可以在我的答案中复制/粘贴替代解决方案中的代码。这里还有一个指向JSFIDLE的链接，可以执行此操作。