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连接加载。