Cancel single image request in html5 browsers

Question

I\'m loading (large) images dynamically to draw into a html5 canvas, something like this:

var t = new Image();
t.onload = ...
t.src = \'http://myurl\';
         


        

Answer 1

You can try window.stop() to stop all requests, but not individual ones. In IE, it's not window.stop() it's document.execCommand("Stop", false).

If you've got other stuff going on request-wise, then doing this will interfere with it. (You would follow-up with a re-request for resources you still want, but that is too much like hard work).

---

So if you wanted to stop a single request for a large image, what you could do is load the image into a document within a hidden IFRAME. The onload event of the IFRAME can be used to load the image into the main document, by which time it ought to be cached (presuming you have the caching directives configured to do so).

If the image is taking too long, then you can access the IFRAME's contentWindow and issue a stop command to that.

You need to have as many IFRAME elements as there are images that can be requested simultaneously.