I have a website that has similar functionality to Stack Overflow where you can click on favorite grey star and it turns yellow (swaps images).

It seems like on Stack Overflow it changes instantaneously where on my site I change the image on the callback from an ajax post so it takes a second for the server to commit and then the callback to fire on the client side. I use a loading ajax image in the meantime so its fine but i am trying to figure out if:

  1. Stack Overflow changes the image before an ajax post and just assumes it will commit successfully.

  2. The site is just that fast that it returns so quickly and updates on a callback.

NOTE: I am preloading images, etc.

share|improve this question
Image preload and browser cache. –  Shadow Wizard Dec 26 '11 at 22:15
If they do indeed change the image before receiving the ajax answer, they will certainly not assume it committed successfully. They will most certainly handle the error response and reset the image if it failed. ;-) –  santiagoIT Dec 26 '11 at 22:17
Try voting for one of your own answers or questions. It won't accept the vote on the back-end, but before the rejection, the triangle goes orange until the response comes back, then it resets to gray. –  Faust Dec 26 '11 at 22:36
Just because this question uses Stack Overflow as an example, doesn't mean it's about Stack Overflow. It's a programming question about how to do something, not a question about SO itself. –  Greg Hewgill Dec 27 '11 at 5:21
@GregHewgill - i agree . i am not sure why this was moved over to meta. . . if i asked about yahoo.com, my guess is that it would have stayed on SOF :) –  leora Dec 27 '11 at 5:25
add comment

migrated from stackoverflow.com Dec 26 '11 at 23:00

This question came from our site for professional and enthusiast programmers.

4 Answers

up vote 5 down vote accepted

I believe the answer is (1), the image is changed before the request is even sent.

You can test this by clicking the star and then immediately clicking some other link on the page (like the question title). You'll get a popup message saying that there was an error doing the request (because the browser cancelled the ajax request), and the star may or may not have been committed when you reload the page.

I can do this reliably, but I'm on the other side of the planet from the SO servers, and therefore the response time is limited by the speed of light.

share|improve this answer
Yep, plus even when you wait long enough to navigate elsewhere and you then use your browser's back button your vote seems to be forgotten until you refresh the page. –  Marjan Venema Dec 27 '11 at 12:45
add comment

The image is changed before the AJAX call is made. You can check this using FireBug (or equivalent) to check the net traffic.

Also, the image is a sprite, so it doesn't have to load the image either.

share|improve this answer
add comment

You can use CSS Sprites, image preloading and browser caching for that :-)

When you look at the CSS Sprite file, you also see by it's url that SO is using a CDN.

share|improve this answer
add comment

They use only one .png image:


than on hover, click, whatever - they just change the background-position for that element.

So actually one image is loaded and you can just change it's position for the actions you want.

share|improve this answer
add comment

You must log in to answer this question.

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