CSS styled lists UL LI - ( sprites ) loading jumpy

Question

Thanks everyone for taking the time to read this.

I have styled my navigation bar and a few other things on my website using lists. For example...

<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>

It works perfectly, but when it loads, it kind of like breathes. It starts off shrunken in a little bit, and then expands to its properly place after a second. I do not know what is causing this problem, and I don't think it's due to the way I styled the list, as I will show.

This is the website with the problem. http://beaconrecords.com/

here is a test link that doesn't have the problem. http://beaconrecords.com/wp-content/themes/br/test.php

Wow, did not see such a slow loading site for a long time ... — Robert Niestroj, Jun 01 '12 at 19:28
@Robert Never seen such a slow loading website? You're lucky... :) — ACarter, Jun 01 '12 at 19:32
[An on-the-spur example](http://hu.wikipedia.org/w/index.php?title=A_Grace_klinika_epiz%C3%B3djainak_list%C3%A1ja&diff=10299856&oldid=10299567) — ACarter, Jun 01 '12 at 19:35

score 0 · Accepted Answer · answered Apr 09 '12 at 00:06

0

I personally don't see this as being all that problematic, however, I feel that cutting up the 'lightning' spacers into two images is and it's likely that resolving that issue will also fix your other one. I would extend the images in each li to include a spacer (or even better, use the word image as a background for the links and use the spacer as a background for all but the last {or first} list item).

Right now the lightning bolts are not appearing correctly for me (in Chrome) and this would be a way to ensure that.

answered Apr 09 '12 at 00:06

Godwin

9,739
6
40
58

I don't know how I missed that chrome error, so thank you so much! I will most definitely try your solution and let you know how it ends up. – Jacob Raccuia Apr 15 '12 at 03:28
So I actually removed the bolts altogether. I know this is months later but we redid the nav and there are no bolts. It is still incredibly jumpy however. I find it problematic just because it is annoying! – Jacob Raccuia Jun 06 '12 at 02:55
Not seeing any jumpiness, have you checked other browsers? Which browser are you using? – Godwin Jun 06 '12 at 05:47
it's currently jumping on Firefox 12.0 on Windows XP. Yesterday it wasn't jumpy, but right now it is. – Jacob Raccuia Jun 08 '12 at 17:13

score 0 · Answer 2 · answered Jun 01 '12 at 19:31

0

Test your site at Google PageSpeed: https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fbeaconrecords.com&mobile=false - maybe you find some thing you could improve. In my opinion your site i generally slow loading on my 1M connection.

answered Jun 01 '12 at 19:31

Robert Niestroj

15,299
14
76
119

I agree, it is terribly slow. I will eventually run through these, but I looked through and nothing seemed to add a ridiculous amount of time. Compression maybe. – Jacob Raccuia Jun 06 '12 at 02:57

CSS styled lists UL LI - ( sprites ) loading jumpy

2 Answers2