Как сделать preloader для сайта?

Question

[Worddoc]

Здравствуйте. Нигде не могу найти информацию о том, как сделать preloader с процентной загрузкой, которая бы зависела от реального хода загрузки? Спасибо.

Answer 1

[Сергей Сунцев]

как вариант, если ты что-то загружаешь, через ajax, то можно воспользоваться такой чтукой

$.ajax({
                beforeSend: function () {
                    preloader.fadeIn(); //функция начала загрузки
                },
                success: function(){
                    preloader.fadeOut(); // функция конца загрузки
                }
            });

Answer 2

[Максим Тимофеев]

Проще всего сделать имитацию хода загрузки. Первым грузите блок с заглушкой и загрузкой, например: getbootstrap.com/components/#progress-animated
потом в js после полной загрузки или при ready делаете display:none; для заглушки. Заполнение индикатора хода загрузки теоретически можно привязать к крупным фото, например. Через:

$('селектор_крупной_фотки').load(function(){
    $('селектор_индикатора').css('width','80%');
});

Полазив в панеле разработчика хром, можно найти таймлайн где видно, какой элемент и когда загрузился, отсюда найти чекпоинты для индикатора.
Но мне кажется, что надо оптимизировать страницы сайта, так что грузились они за 1-2с. Тогда и обычного крутящегося шарика достаточно, не показывая этапы загрузки.

Answer 3

[seriogja]

Здравствуйте!

На мой взгляд, делать прелоадер процентным нет никакого смысла, так как нельзя определить, что взять за единицу процента данного прогрессбара. Кол-во картинок, скриптов? Если делать пргрессбар как предложил Сергей Сунцев , то будет только позиции в прогрессбаре, что не имеет смысла (в рамках загрузки страницы). Если делать, как предложил Александр Аксентьев , т.е. количество скриптов брать за 100%, то тут вообще прогрессбар покажет левую цифру. В учет не пойдет загрузка (может быть 1000) css файлов, картинок, шрифтов. И, если какой-то скрипт не загрузится - это не значит, что страница не загрузилась.

Я думаю, что лучший вариант - скрывать контент до полной загрузки страницы, а пока грузится показывать прелоадер.

Answer 4

[chigoe]

Вот неплохая штука, в темах оформления есть с процентами: pace.js

Answer 5

[Александр Аксентьев]

Способа сделать это нет.
Особенно если используются подгружаемые модули с зависимостями.

Если количество скриптов фиксировано, можно конечно задать 100% как количество всех скриптов и в каждый скрипт добавить колбек о том что он загрузился.
И строить прогресс на этом, но это далеко не автоматически, и достаточно геморно выйдет.

Answer 6

[wshaman]

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

Answer 7

[Иван]

Вы можете сделать это, если будете загружать ресурсы какой-нибуть библиотечкой, которая умеет делать callback по загрузке отдельного элемента (я припоминаю yepnope и head.js для js и css, для картиночек тоже такое наверняка есть). При этом вы должны будете измерить вручную (заранее) и положить в массив размеры каждого элемента (например, {logo.css : 33kb, libs.js: 11kb, img01.jpg: 123kb}). Таким образом, вы заранее будете знать объем всей информации и вклад каждого элемента, и по загрузке отдельных частей получать процентную готовность.
Если это не автоматизировать, то каждый раз при изменении размера файлов надо будет обновлять массив, кроме того, такая страничка выглядит странно в глазах поисковика (ибо все в ней грузится JS-ом).

Comments

[Иван]

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