Блог

У меня есть панель прогресса пользовательского интерфейса jQuery, которая действует как таймер. Однако, когда я открываю страницу, все, что на ней есть, это «Загрузка …» (добавлено в html) и ничего больше.

Ссылки на файлы

HTML-файл: http://pastebin.com/Re0ZKVNY

Файл Javascript: http://pastebin.com/zynA5MnY

Кажется, я не могу найти ничего плохого в коде. Пробовал копировать и вставлять код из демонстрационных версий пользовательского интерфейса jQuery, но, похоже, ничего не помогает (с моим кодом.).

Кажется, вы делаете несколько вещей неправильно:

• вы пытаетесь использовать виджет jQuery UI Progressbar, но при этом устанавливаете ширину индикатора выполнения с помощью CSS (который фактически манипулирует обычным DIV элементом HTML
• часть вашего кода выполняется немедленно, а часть — при событии готовности

Это упрощенный пример, в котором не используется индикатор выполнения пользовательского интерфейса jQuery, а скорее пользовательское решение, которое вы на самом деле используете.

Но в принципе позвольте мне также изменить ваш код и переместить все туда, где оно должно быть:

 // 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");
        });
      })
    }

});
  

Альтернатива

Поскольку кажется, что все, что вы делаете в своем интервале, — это анимировать индикатор выполнения, кажется разумным просто позволить jQuery выполнять анимацию вместо этого. И поскольку вы увеличиваете свой индикатор выполнения каждые 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");
        }
    );
});