$(document).ready(function() { будет выполнять обратный вызов только после полной загрузки исходного DOM. На большой странице это может произойти через некоторое время после того, как начальные элементы будут видны пользователю.
Убедитесь, что jQuery включено выше (возможно, в <head>), затем после окончательного .counter элемент в HTML, немедленно вставьте тег script, чтобы он запускался сразу после создания элемента в DOM, не дожидаясь загрузки остальной части страницы:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>content</div>
<div>content</div>
<div class="counter">100</div>
<div class="counter">200</div>
<div class="counter">300</div>
<div class="counter">400</div>
<script>
var counters = $(".counter");
var countersQuantity = counters.length;
var counter = [];
for (i = 0; i < countersQuantity; i++) {
counter[i] = parseInt(counters[i].innerHTML);
}
var count = function(start, value, id) {
var localStart = start;
setInterval(function() {
if (localStart < value) {
localStart++;
counters[id].innerHTML = localStart;
}
}, 80);
}
for (j = 0; j < countersQuantity; j++) {
count(0, counter[j], j);
}
</script>
<div>content</div>
Обратите внимание, что вы можете значительно очистить свой код, если вы используете sh, и вам не требуется большая библиотека, такая как jQuery, просто для выбора элементов:
<div>content</div>
<div>content</div>
<div class="counter">100</div>
<div class="counter">200</div>
<div class="counter">300</div>
<div class="counter">400</div>
<script>
for (const counter of document.querySelectorAll('.counter')) {
const target = Number(counter.textContent);
counter.textContent = 0;
const interval = setInterval(() => {
const curr = Number(counter.textContent);
if (curr < target) counter.textContent = curr + 1;
else clearInterval(interval);
}, 80);
}
</script>
<div>content</div>