CSS 样式列表 UL LI - (精灵) 加载跳跃

Question

感谢大家抽出宝贵时间阅读本文。

我使用列表在我的网站上设置了导航栏和其他一些东西的样式。 例如。。。

<ul>
    <li id="n1"><a href="http://www.beaconrecords.com/index.php"></a></li>
    <li id="n2"><a href="artists"></a></li>
    <li id="n3"><a href="lifestyle.php"></a></li>
    <li id="n4"><a href="events.php"></a></li>
    <li id="n5"><a href="shop.php"></a></li>
    <li id="n6"><a href="contact.php"></a></li>
    <li id="n7"><a href="about.php"></a></li>
</ul>

它

工作得很好，但是当它加载时，它有点像呼吸。 它开始缩小一点，然后在一秒钟后扩展到适当的位置。 我不知道是什么导致了这个问题，我认为这不是由于我设置列表样式的方式，正如我将展示的那样。

这是有问题的网站。http://beaconrecords.com/

这是一个没有问题的测试链接。http://beaconrecords.com/wp-content/themes/br/test.php

Answer 1

我个人认为这并没有那么大的问题，但是，我觉得将"闪电"垫片切成两张图像是，并且很可能解决这个问题也会解决您的另一个问题。我会扩展每个li中的图像以包含一个间隔符（或者更好的是，使用单词图像作为链接的背景，并使用间隔符作为除最后一个{或第一个}列表项之外的所有列表项的背景）。

现在闪电没有为我正确显示（在 Chrome 中），这将是确保这一点的一种方式。

Answer 2

在Google PageSpeed上测试您的网站： https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fbeaconrecords.com&mobile=false - 也许你发现了一些可以改进的地方。在我看来，您的网站通常会在我的 1M 连接上加载缓慢。