Is checking mousemove a good way to determine whether or not to download assets?

Question

So I've got a web app that is for all intents and purposes a photo viewer.

When a thumbnail is clicked, the app

1. requests the image asset,
2. injects it into the DOM as an IMG tag
3. and disposes the other

(MooTools Asset.image, inject and dispose).

If they click on an image that has already been loaded I just inject it again since dispose stores it.

Users look at the images for an average of 12 seconds (according to my stats), that's plenty of time to download a few more.

So my question again, slightly rephrased:

Is it good or bad practice to determine if I should download other assets in the background based on the movement of their mouse?

So if the mouse isn't moving, download the next few assets. If it starts moving, stop and wait for the mouse to stop (and have a little interval before starting to download again, like 1 or two seconds).

It seems like a good idea to me but it just feels like there are some secondary effects I'm not thinking about.

Gracias.

Answer 1

To answer your question directly, I don't think there will be an issue except that checking for mouse movement will have a degree of performance overhead. I would measure the performance on a slow machine, once you are done, to see if this is a problem.

Answer 2

You might make your back and forward buttons have bigger areas (white/transparent backgrounds) and check for mouseover on those backgrounds and load the images when the cursor is on those areas. Basically load the image right before the user clicks the button.

Answer 3

There is an entry point for these kinds of background tasks: requestidlecallback