Как правильно реализовать preloader?

Question

[Tizi]

у меня имеется вот такой макет.

клик

Он разбит по ширине на 4 блока. Каждый из них имеет свойство :hover при котором область блока получает background. но при наведении на блоки после загрузки страницы блок пару секунд не меняется а только потом проявляется картинка. связано это с большим разрешением картинок. задался мыслью сделать preloader. проштудировал много статей про них. но в большем количестве случаев все используют просто таймер на preloader. мне это не подошло. есть ли вариант сделать прелоадер так что бы он выключался только после прогрузки определенного контента ?

P.s: Была мысль задать всем блокам не background а через img + z-index + opacity якобы фон. мб он прогружался бы быстрее .

Answer 1

[Денис]

То ли в бекграунде, то ли элементом страницы, но браузеру понадобится "прочитать" файл и, если он внушительного размера, то разница во времени загрузки, если и будет, то малозначительна.
А установить обычное событие load разве не помогает? Скрыть прелоадер после полной загрузки страницы. Вот, набросал вам простейший пример. Одно изображение (шестое по счету), лично у меня, достаточно долго грузится, чтобы заметить нужный эффект.

window.addEventListener('load', function(){
	document.getElementById('preloader').style.display = 'none';
});

P.S. Не заметил тег jQuery. Раз так, то код еще проще:

$(window).on('load', function(){
	$('#preloader').fadeOut('slow');
});

Comments

[Tizi]

в вашем случае фотографии вы задали фон. а у меня фон появляется только тогда когда я навожу на блоку и только после того как я навел прогружает фотку.