5

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.

5
  • Image preload and browser cache. Dec 26, 2011 at 22:15
  • 1
    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, 2011 at 22:17
  • 1
    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, 2011 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. Dec 27, 2011 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, 2011 at 5:25

4 Answers 4

5

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.

1
  • 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. Dec 27, 2011 at 12:45
3

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.

2

They use only one .png image:

http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

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.

1

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.

You must log in to answer this question.

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