The scenario:
When I vote for a question, a successful up vote is cast, then I refresh the page. I can't see the up_vote_off image anymore, I immediately see the up_vote_on image.

I checked the response of the main HTTP request for the question and it is off, not on.

So, the on CSS class is being put by Javascript, not generated on the server and being transferred to me, I am amazed (and a little confused) about how can you do that? I mean, there must be even a little gap between the moment, the response is received and the execution of Javascript on the client, but there is no gap. (by gap, I mean that the user sees the off vote image then sees it flip to the on vote image), if this is done by caching, any details please about that? what technique is used? where exactly the vote info is being put?


Take a look at this image:


This is the "sprites" for the page. The vote being selected or not is rendered only by the offset into this image via CSS.

You can see more about sprites and CSS with a web search, but the key point is this, you won't see the up vote being "downloaded" in the HTML since it is rendered by a combination of CSS and javascript.

If your machine was slow enough you would see the "delay flicker" but no modern machine would be so slow.

  • No my machine is good, and I said that there is no gap. I'm using a similar approach, but with 2 separate images, and I have a little gap, are you telling me that If I used a full sprite this gap will be gone? – Kenan D Oct 26 '11 at 13:47
  • @LordCover : Yes, as some performance tests would show, changing images is MUCH slower than changing an offset. This is why sprite use has come into vogue. – Hogan Oct 26 '11 at 13:52
  • @LordCover : Also, make sure you are using DOM ready not page. (cf javascriptkit.com/dhtmltutors/domready.shtml) – Hogan Oct 26 '11 at 13:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .