Question

I’m using beatiful jQuery counter you can look at it here – https://github.com/sophilabs/jquery-counter , but I have trouble with it.

When page has a lot of content ( images, other ), in Firefox it firstly show:

and after it shows:

The number is ther same, but I mean it firstly showing text, and then showing image.

Only additional css was:

.counter_class 
{
  float: right;
  padding: 20px;
}

and HTML:

 <div class="counter_class">
  <span class="counter" data-direction="up" data-interval="1"
         data-format="999999" ><%= @counter %></span>
 </div>

Can someone suggest how can I fix this without damaging performance ?

Answer 1

Seems that your content is replaced on the fly, if you don’t want that you can hide your div in css and show it in jQuery on document ready.

Try something like .counter_class { display: none; } at first, then after your jquery call to counter $('.counter_class').show(); or try to speed up your page somehow.