замирание в JQuery UI прогрессбар

Question

Пример сайта: http://johanberntsson.se/dev/fotosida/

Соответствующий код:

jQuery.fn.center = function() { 

    this.css("position","absolute"); 
      this.css("top", (($(window).height() - this.outerHeight())/2) + $(window).scrollTop() + "px"); 
      this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
      return this; 
} 


$.each(data, function (index, val) { 
    $('<img/>').data({ 
     exif: val.exif 
    }).attr({ 
     'src': 'fotosida/' + val.full_url + "?" + new Date().getTime(), 
     'class': 'mainimages' 
    }).css({ 
     'margin': '10px auto', 
     'display': 'block' 
    }).hide().appendTo('body'); 
}); 

$('#progressbar').center().fadeIn(500); 

var i = 1; 

$('body img.mainimages').load(function() { 
    $("#progressbar").progressbar({ 
     value: (i/data.length) * 100 
    }); 
    i++; 
    if(i > data.length) { 
     setTimeout(function() { 
      $('#progressbar').fadeOut(500, function() { 
       $('body img.mainimages').fadeIn(200); 
      }); 
     }, 200); 
    } 
}); 

То, что я не понимаю, почему загрузчик не выгорает Это просто всплывает, как я был. используя show()

Любая помощь приветствуется!

Answer 1

Я бы предположил, что это потому, что вы не создаете индикатор выполнения, пока не загрузится первое изображение. Таким образом, он делает, исчезает, но это пустой div в этой точке. После того, как первый div будет загружен, индикатор выполнения будет инициализирован.

Попробуйте сделать это:

$('#progressbar').progressbar({ value: 0 }).center().fadeIn(500); 

В качестве дополнительной записки, если вы используете это в качестве #progressbar CSS, вам не потребуется специальная center() функция, а индикатор будет оставаться в центре если окно изменено:

#progressbar { 
    display: none; 
    width: 900px; 
    height: 2em; 
    position: absolute; 
    margin-left: -450px; 
    margin-top: -1em; 
    left: 50%; 
    top: 50%; 
}