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連接加載。