Jump to content
Stef's Coding Community
Sign in to follow this  
gffects

image glitching or loading

Recommended Posts

Hey all I finally finished my homepage and it meets the w3c html and css recomendations but I am noticing a glitch.

When I first load the page when i go to an image that is a link with a roll over when I go to use the link both images completly disapeer for a second then when i hover agin it works what could the reason be for this.

 

I have use the images in css not html so that could be the cause or it could be the server being slow to load, I am with ipage hosting, could also be the sizes of the image but there only 50kb so that shouldn't be much of problem.

 

The website I am discussing is in my signiture your help would be greatly appreciated.

Share this post


Link to post
Share on other sites

Two things:

 

-- A lot of your images seem pretty large. For example, each of your buttons seem to be between 50 and 70kb each. I would highly suggest using the .gif file type (or the PNG8 file type) and dropping/simplifying the need for transparency. In many cases, the transparency isn't needed. For example, in your main navigation, you would get significantly smaller file sizes if you removed transparency and integrated the background gradient into the navigation image. You'd be much better off using navigation images that didn't include transparency but were significantly smaller.

 

-- The issue is caused with the fact that you are changing the background image when links are hovered over, and each link has to load a 50 something kb image. This can be partially fixed by reducing the image size, but it would be better for you to use CSS sprites and skip the whole issue entirely. This is a pretty good tutorial on the subject: http://css-tricks.com/css-sprites/

 

I don't usually suggest making one large sprite image that contains all/most of the images you use in the site, but I do think it would be helpful to use sprites for your buttons, so the hover effect is done by moving the background position and no loading of new files is done. Your code wouldn't need to be modified much to take advantage of CSS sprites -- you'd just need to create an image for each of your buttons that uses both normal and hover states, and modify the CSS to move the background position on hover, rather than loading a new file.

Share this post


Link to post
Share on other sites

Ok never heard of sprites other than tiny images so this is new to mee but I will give it a good read and put it into action thanks very much I will let you know how it goes.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...