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'; 

But every once in a while would like to cancel the image request completely.

The only way I came up with is setting src to ''. i.e.

t.src = '' 

This works in many browsers, but it seems that only Firefox actually cancels the http request for the image.

I tested this with Fiddler2 by disabling caching and enabling "emulate modem speed". Then running a fiddle to test canceling a image request. (I'd love to hear other ideas on how to test this)

I know there are ways to cancel all requests (as in this question), but I'd like to only cancel one.

Any ideas on other ways (especially on mobile browsers) to do this?

Answer 1

This is the only way that I managed to get it to work in all modern browsers (Chrome, Safari, Mobile-Safari, Firefox, and IE9).

• Load an empty and hidden iframe
• append an image tag to the body in the iframe
• when the img.onload completes, you can use that image dom element to draw to an html5 canvas with drawImage()
• if you want to cancel the load, issue a stop() on the iframe's contentWindow (or execCommand("stop", false) on contentDocument in IE).
• after you cancel a image load, you can reuse the iframe to load more images.

I created a class for this, and put the coffeescript code (and it's compiled javascript) on github: Cancelable Html5 Image Loader

If you want to play with it, I also created a jsfiddle to test it out. Remember to start Fiddler2 (or something like it) to see that the actual network request is really being canceled.