Плавное увеличение ширины div (preloader на сайт)

@jonni · Регистрация: 03.03.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте! Пытаюсь сделать предзагрузчик на сайт. Идея такова: имеется div с нужным background. Изначально ширина его 0, и в зависимости от степени загруженности сайта увеличивается его ширина. Не получается реализовать плавное увеличение. Если картинка маленькая загружается, то ширина слишком быстро увеличивается, если большая картинка, то пауза и рывок..подскажите пожалуйста как исправить?

Javascript

<script>
    (function ($) {
        var imgList = [];
        $.extend({
            preload: function (imgArr, option) {
                var setting = $.extend({
                    init: function (loaded, total) { },
                    loaded: function (img, loaded, total) { },
                    loaded_all: function (loaded, total) { }
                }, option);
                var total = imgArr.length;
                var loaded = 0;
 
                setting.init(0, total);
                for (var i in imgArr) {
                    imgList.push($("<img />")
                    .attr("src", imgArr[i])
                    .load(function () {
                        loaded++;
                        setting.loaded(this, loaded, total);
                        if (loaded == total) {
                            setting.loaded_all(loaded, total);
                        }
                    })
                );
                }
 
            }
        });
    })(jQuery);
 
 
    $(function () {
        $.preload([
        "/img/DSCF1870.jpg",
        "/img/preload_logo.png",
        "/img/green.png",
        "/img/green_act.png",
        "/img/blue.png",
        "/img/blue_act.png",
        "/img/yellow.png",
        "/img/DSCF1871.jpg",
        "/img/yellow_act.png",
        "/img/blue_venz.png",
        "/img/yellow_venz.png",
        "/img/beach.jpg",
        "/img/tree.png",
        "/img/DSCF1872.jpg"
 
 
        ], {
            init: function (loaded, total) {
                $("#top, #home, #projects, #design, #technik, #lab, #about, #jobs").hide();
                // $("#loadingtext").html();
            },
            loaded: function (img, loaded, total) {
                var loader = ((loaded / total) * 88);
                var prozent = Math.round(loaded / total * 100);
                //  $("#loadingtext").html(prozent + "%");
                //$("#loadingtext").html("Lade jede Menge Inhalte: "+loaded+"/"+total);
              //  alert(loader);
                $("#loadingbar").css({ "width": +loader  + "px" });
            },
            loaded_all: function (loaded, total) {
                //  $("#loadingtext").html("<br />");
                $("#preloader").delay(500).fadeOut();
                $(".loader").delay(100).fadeOut();
                $
            }
        });
 
    });
</script>

@kalabuni · 21.04.2013, 04:13

1. картинки в браузер загружаются не последовательно одна за другой, а одновременно
2. javascript может отследить только момент окончания загрузки конкретной картинки по событию onload
3. момент начала загрузки конкретной картинки и ход этой загрузки javascript отследить не в состоянии

из вышенаписанного следует, что по-любому ваш прогресс-бар не будет отображать реальную ситуацию с загрузкой
т.е. по-любому прогресс-бар - это обман (или самообман)
вы хотите, чтобы вам подсказали, как вам лучше самого себя обмануть?

@jonni · 21.04.2013, 11:21 **[ТС]**

Сообщение от kalabuni

вы хотите, чтобы вам подсказали, как вам лучше самого себя обмануть?

Скорее не себя, а пользователя тогда уж..

Спасибо за объяснение.

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	21.04.2013, 04:13	2
	1. картинки в браузер загружаются не последовательно одна за другой, а одновременно 2. javascript может отследить только момент окончания загрузки конкретной картинки по событию onload 3. момент начала загрузки конкретной картинки и ход этой загрузки javascript отследить не в состоянии из вышенаписанного следует, что по-любому ваш прогресс-бар не будет отображать реальную ситуацию с загрузкой т.е. по-любому прогресс-бар - это обман (или самообман) вы хотите, чтобы вам подсказали, как вам лучше самого себя обмануть? 1

@jonni 119 / 119 / 25 Регистрация: 03.03.2010 Сообщений: 436
	21.04.2013, 11:21 [ТС]	3
	Сообщение от kalabuni вы хотите, чтобы вам подсказали, как вам лучше самого себя обмануть? Скорее не себя, а пользователя тогда уж.. Спасибо за объяснение. 0

Опции темы