Расчет всех ресурсов, загруженных на страницу

Прямого способа сделать это не существует. Теги сценариев и изображений имеют событие загрузки, поэтому вы можете прикрепить обратный вызов и узнать, когда они загружены. Css не имеет событий или свойств для запроса, однако вы можете использовать обходной путь, используя тег img. Но это не так просто, потому что если вы прикрепите обратный вызов к уже загруженному тегу скрипта, этот обратный вызов никогда не запустится, то же самое для тегов img. Поэтому, когда ваш индикатор выполнения начнет отслеживать все img / script / css в документе, ему нужно будет знать, какой img / script / css уже загружен, а затем прикрепить обратный вызов события для других, которые еще не загружены. Теги img имеют свойство complete, а сценарий - нет, поэтому вы не можете узнать, загружен сценарий или нет, просто запросив DOM. Css - это больше трюк.

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

Покажите на своей странице старый и хороший спин и будьте счастливы :)

Общее количество:

$('script, link[type=text/css], img').size();

Это вернет общее количество запрошенных вами ресурсов.

Я думаю, вы неправильно подходите к проблеме ...

Если ваша страница настолько велика, что для нее требуется индикатор выполнения, вероятно, она слишком велика.

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