Как сделать прелоадер с прогрессом?

Question

[Андрей]

Нужно сделать прелоадер с прогрессом загрузки. Это делается просто:

for (var img of totalImages)
{
	var tempImage = new Image();
	addEventListener('load', this.checkLoaded);
	addEventListener('error', this.checkLoaded);
	tempImage.src = img.src;
}

Но появилась проблема, ведь на сайте все картинки поставлены background-image'ем в css. Вроде бы можно было поменять на:

for (var img of totalImages)
{
	var tempImage = new Image();
	addEventListener('load', this.checkLoaded);
	addEventListener('error', this.checkLoaded);
	tempImage.src = img.style.backgroundImage;
}

Но ! Css в это время ещё не загружен. Как решить эту проблему ?

Comments

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

Это только 1 проблема, а будет еще вагон. Поэтому Вы не найдете прелоадеров, которые показывают реальную загрузку. Как правило делают имитацию.

[Андрей]

Максим Тимофеев, пусть будет хотя бы имитация, ведь картинок и правда много. В принципе хотя можно сделать Lazy Load, но в данном случае прелоадер - дизайнерское решение, которое хотелось бы использовать не просто для красоты, а ещё и подгрузить картинки.

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

null_object, а какая связь? Отдельно должен жить прелоадер, отдельно логика lazyLoad это независимые вещи, зачем Вы придумываете лишние зависимости? В крайнем случае, lazyLoad может кидать событие, которое юзает прелоадер, но я бы ве равно тамаут предусмотрел.
А с картинками в css - это третье решение. Тут надо спрайт делать, это намного лучше, чем извращаться с загрузкой.

[Андрей]

Максим Тимофеев, спасибо за идею со спрайтами ! Пожалуй, так и сделаю.