Rounded corner imgs load slow

Forum Moderators: not2easy

Message Too Old, No Replies

Rounded corner imgs load slow

round corners css

dudespeakup

5:07 pm on Oct 1, 2008 (gmt 0)

I'm trying to implement a non-javascript rounded corner solution on my website via adding small rounded corner .gifs or .pngs to my divs.

The problem I'm having:

The rounded corners load about a second later than the rest of my page, leading to a moment of really ugly cornerless divs and then a jolt when the images load.

When I go to professional sites that use images for their rounded corners, the load is seamless - everything appears at the same time.

What can I do to eliminate this disparity in load time? I'm running on hostmonster - could it be that they are running much faster servers than I am? Or is there something simple I'm missing here with my code?

Would appreciate any help here - I really want rounded corners but am not willing to take this visual jolt in order to have them.

Thanks,

Ken

londrum

6:53 pm on Oct 1, 2008 (gmt 0)

the way i do mine is like this... i have all four corners combined into a single image.
the image i use is actually a circle. and i position the relevant segment of the circle over the four corners with CSS. so i only have one image to load -- and it is referenced in the CSS file, which should get loaded first anyway (because its in the head).

this way the image will be loaded before the <scripts> (which i place at the end of the page), and any of the other images contained in the <body>.

swa66

6:55 pm on Oct 1, 2008 (gmt 0)

Faster servers and more better bandwidth always helps to load things faster.

Having less elements on the page helps as well. Simplifying the layout helps, as well as using things like CSS sprites. A high profile CSS sprite using site is ask dot com.

Making images, html and css smaller helps as well. But one larger "sprite" is still faster than multiple smaller images.

Also check the performance rules over at yahoo:
[webmasterworld.com...]

londrum

7:03 pm on Oct 1, 2008 (gmt 0)

failing all of that... and if you don't mind waiting around a while... you can use the actual rounded corners thing in CSS. because that doesn't use any images at all.
it only works in firefox at the moment though.

border: 1px solid #000;
-moz-border-radius: 5px;

swa66

7:43 pm on Oct 1, 2008 (gmt 0)

webkit (the engine used in Safari and Google chrome) has pre-CSS3 rounded corners too:

-webkit-border-radius:
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-webkit-border-bottom-left-radius:
-webkit-border-bottom-right-radius: