Как правильно выполнить прелоадер?

Question

[Денис Букреев]

Стоит задача написать анимированный прелоадер для одной из страниц сайта.
Я беру имеющиеся картинки (страница основана на множестве изображений) в массив и прохожусь по ним (схематично):

let i = 0;
function loadImage () {
  let img = new Image();
  img.onload = () => {
    i++;
    loadImage();
    updPercent(); // увеличиваю процент на прелоадере

    // здесь условие, которое останавливает зацикленность
  };
  img.src = $(it.images[i]).attr('src');
}
loadImage();

Но, по итогу, все картинки загружаются одновременно (хотя я им ставил display none) и прелоадер анимируется с 0 до 100 в один момент

Как тогда правильно осуществить подобную задумку?

Answer 1

[Exploding]

Что-то мне кажется, что эту задачу с полноценным прелоадером можно решить только так:
Создаете рекурсивную функцию которая будет проверять наличие незагруженных картинок (src не указывать изначально, а хранить путь в data-src)
Перед первым запуском определяете общее кол-во рисунков для загрузки и это будет тотал вашего прелоадера.
Ну и при загрузке рисунка (выполнении функции), делаете +1 к тоталу и вызываете ее для следующего рисунка...
------
Что-то я такое наворотил....)))) Наверно есть что-то и попроще)

Comments

[Денис Букреев]

у меня так и сделано, только картинки сразу в атрибуте src

такой вариант точно должен прокатить, сейчас попробую, спасибо)

[Денис Букреев]

Да, все получилось)

[Exploding]

Денис Букреев: ну вот и отлично:)

Answer 2

[Negwereth]

А если не локально страницу открывать? Или хотя бы в профайлере хрома ограниченние скорости указать?

Comments

[Денис Букреев]

на удаленном сервере тоже самое