Событие во время загрузки экрана
 

Привет друзья!
Нужен прелоадер, на котором бы изображение при загрузки страницы заполнялось цветом, то есть если 50% загружено, то 50% залито.
В мою голову пришло следующее: сделать картинки прозрачными и заполнять фон под картинкой, тогда как бы они будут заливаться.
Накидал следующее

$('.load__bg').addClass('load__bg-hov');

$(window).load(function() {
	setTimeout(function(){
		$('.load').hide();
	}, 2000);
	
});

.load {
/* display: none;*/
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transition: all 2s ease;
}
.load__bg {
background: #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1%;
transition: all 2s ease;
}

<div class="load">
	<div class="load__bg"></div>
</div>

Это пока без картинок, чисто заливка фона. И не пинайте, если что не так, я по кускам с разных статей собирал).
Но как я понял load работает после прогрузки страницы. А как сделать, чтобы во время? Что то ничего не найду такого :-? . Помогите

$(window).load(function() {
$(function() {

так попробуйте

То есть скрипты не ждут полной загрузки и сразу грузятся? Понятно... Спасибо. А как тогда сделать ну типа 50% загрузки - 50% заливки? Или это все ну типа обман). И нужно просто на глаз выставить анимацию?)

Страницу загружает не скрипт ваш, а браузер, и
$(window).load(function() {
$(function() {
это ее готовность (DOM), а таймеры глупость.