Demo: slow image and fast image

In this demo, there are two links and two images that can be loaded. Each links loads its corresponding image. However, assume that due to the network or the server load:

Consider a user that clicks first "Load Image1" and then quickly clicks "Load Image2". Then Image2 shows up quickly, while Image1 still loads. In the end Image1 is shown, because it is the last to load. However, the user has selected Image2. The order of events is as follows:

  1. Click "Load Image 1". Selected image says 1
  2. Click "Load Image 2". Selected image says 2
  3. Image 2 loads quickly and is displayed.
  4. Image 1 loads.

In the end, the user sees image 1, but he thinks he selected image 2. The indication also shows image 2.

This is a race between the events that change the displayed image. A possible good solution is that the request for the first image loading is canceled once the second request is made.

Load Image 1     Load Image 2

Selected image: none

Note: this demo is simulated. There is no server that delays the image loading. We delay it intentionally by setTimeout