Question

Example site: http://johanberntsson.se/dev/fotosida/

Relevant code:

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

What I don’t understand is why the loader doesn’t fade in. It just pops up like I was using show()

Any help is appreciated!

Answer 1

I would guess it is because you aren’t creating the progress bar until the first image loads. So, it does fade in, but it is an empty div at that point. Once the first div loads, the progress bar is initialized.

Try doing this:

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

As an added note, if you use this as your #progressbar css, you won’t need a special center() function, and the progress bar will remain centered if the window is resized:

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