0

im working on a Website where you can browse through images rapidly by pressing a key, so i've got the Javascript and everything set up (It simply rewrites a div with .innerHTML to display a new image)

However, if you press the key a few times, it loads up each image even if its not required anymore. This delays the loading of the image the user actually wants to see, so the site slows down (and traffic is used inefficiently etc etc)

It looks like this in the Chrome inspector:

https://i.stack.imgur.com/IkzEC.png

While it could actually cut off the current GET operator because the old image isn't required anymore.

Is there any way to interrupt it? If possible without using a completely different technic to load the images up (AJAX)

Thanks in advance!

Edit: Crazy Train's idea with iframes works! Thank you!

JKunstwald
  • 560
  • 1
  • 3
  • 14
  • You may just want to put a short delay on the code that loads it, which prevents the load if the user just passed over the image quickly. Not a perfect solution, but should help a little. –  Jul 27 '13 at 17:17
  • would be a quick fix, but it would slow the surfing down artificially, isn't there a cleaner solution? – JKunstwald Jul 27 '13 at 17:18
  • *Total* guess, and may be more expensive than it's worth, but maybe try creating a new `window` environment to load an image, then closing the window if the user moves on before it's loaded, or inserting the image if not. I would assume that destroying the environment would cancel the request, but I can't say for sure. I don't know of any way to cancel individual GET (non-XHR) requests. –  Jul 27 '13 at 17:27
  • Sounds like it could work, but how exactly do i set up and collapse the 'window'? – JKunstwald Jul 27 '13 at 17:35
  • An `iframe` element creates a new `window` environment, so you could experiment with that. It could be hidden so the user is unaware of it. Again, it's a total guess. –  Jul 27 '13 at 17:37
  • ...another possibility would be to use XHR, but not for loading the image as you stated you don't want, but rather to send a message to the server that will cancel a transmission. This would of course require a application server, likely with sessions, where you can set it all up. –  Jul 27 '13 at 17:39
  • I'll try the iframe idea, sounds reasonable, give me a second – JKunstwald Jul 27 '13 at 17:41
  • Take a look at [this answer](http://stackoverflow.com/a/7391106/2437417). It provides a bit more information. It does suggest using an `iframe`, and then if needed using `window.stop()` on the `window` object for that `window` environment. This way you wouldn't need to keep creating/destroying windows. –  Jul 27 '13 at 17:47
  • It works! I'll have to fix some new issues now but thanks a lot! – JKunstwald Jul 27 '13 at 17:48

2 Answers2

0

You could use this snippet to cancel a request:

try {
    window.stop();
} catch(e) {
    document.execCommand('Stop');
}

Another safety trick you might want to pull is to trigger the request after a few milliseconds.

Update: XMLHttpRequest has abort method. Call it before sending a new request.abort

ep0
  • 710
  • 5
  • 13
0

I do not believe it is possible to fully 'cancel a request' in the way you want (think trying to take back words you've already spoken). Even if you can tell the browser to ignore the response, the server will still process and send a response.

An approach you could take could be to chunk your responses to include groups of images. For instance, instead of a request getting a single image (which I am assuming will just a url for this case), it could return the url's of the next x number of images. If your 'x' is 10, and the user skips 5 images, you still have to 6th to display to them. All 'extra' images retrieved would effectively been prefetched just in case.

Your code will have to change slightly, as it will have to cache the images, as well as check if it already has a specific image before making the request.

Nick Mitchinson
  • 5,452
  • 1
  • 25
  • 31
  • I think it's the unnecessary fetching/downloading that OP is trying to prevent. Perhaps I'm misinterpreting your answer, but it seems like you're guaranteeing that they'll be downloaded. –  Jul 27 '13 at 17:29
  • Ok, i probably should've added some information on my site: 1. The images are GIFs, so they can get bigger than a usual image 2. They are chosen randomly _or_ based upon user input (aka not deterministic, which makes it impossible to load it in chunks) – JKunstwald Jul 27 '13 at 17:30
  • My mistake, I assumed that you meant you would make an AJAX request to get the location of the next image (which would have only been text), which you then used in the image tag. – Nick Mitchinson Jul 27 '13 at 17:33
  • The code to load up an image looks like this (a little more complicated but this is the method) http://jsfiddle.net/xESgT/ It doesn't work because there are no images hosted obviously, but you get the idea. – JKunstwald Jul 27 '13 at 17:40