Preloader, который на самом деле отвечает на загруженный контент

Question

Я пытаюсь создать предварительный загрузчик, который фактически представляет собой «процент» загруженного контента. Не обязательно числом, но с использованием анимированной рамки (масштабирование слева направо от окна). В настоящее время я использую этот код для определения количества изображений на странице и построения сетки, когда загружаются все изображения.

$(document).ready(function() { 
num_images = $("img").length; 
img_counter = 0; 
$("img").css("display", "none"); 

$(".grid-item").each(function() { 
    $(window).load(function() { 
     img_counter++; 
     if (img_counter == num_images) { 
      console.log(num_images); 
      $("img").css("display", "block"); 
      $('.grid').masonry({ 
       itemSelector: '.grid-item', 
       isAnimated: true 
      }); 
     } 
    }); 
}); 
}); 

Затем, на window.load У меня есть предварительный загрузчик, который добавляет класс «загружен».

$('.preloader').addClass('loaded'); 
setTimeout(function() { 
    $('.content').css('opacity', 1); 
    $('.preloader').css({'transform': 'translateY(-50px)'}); 
}, 500); 

Все это дает иллюзию, что есть функция загрузки, но на самом деле она не показывает процесс загрузки. Как определить, сколько содержимого загружено и отобразить это с шириной предварительного загрузчика?

Вот базовая тестовая страница, с которой я работаю. Спасибо за тонну заранее! Мне не обязательно нужны ответы, но руководство или направление.

http://andyrichardson.design/masonry/

Answer 1

Добавить функцию OnLoad для изображений и увеличивают счетчик, когда функция pnload trggers (которые означают, что загружается изображение)

$(document).ready(function() { 
num_images = $("img").length; 
    img_counter = 0; 
    $('img').load(function(){ 
    img_counter++; 
    // do your other stuff here 
}); 
}