在将其更改为图像之前如何显示数字？ （jQuery计数器）

Question

我正在使用美丽的jQuery计数器你可以在这里查看它 - https://github.com/sophilabs/jquery-counter，但我遇到了麻烦。

当页面包含大量内容（图像，其他）时，在Firefox中首先显示：

之后显示：

这个数字是相同的，但我的意思是它首先显示文字，然后显示图像。

只有额外的css是：

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

和HTML：

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

有人可以建议我如何在不损害性能的情况下解决这个问题？

Answer 1

如果你不想在css中隐藏你的div并在文档就绪的jQuery中显示你的内容，那么看起来你的内容会被动态替换。

首先尝试.counter_class { display: none; }之类的内容，然后在你的jquery调用计数器$('.counter_class').show();之后尝试加速你的页面。

Answer 2

您有几个选择：

• 将CSS文件放在head部分的顶部。
• 在显示页面之前预加载图像。
• 显示默认图片，将在加载图片后进行替换

祝你好运！