Modern Asynchronous JavaScript

Making a User-Cancelable Async Request

When including large files on your page, you should take into account the fact that some users will be on limited bandwidth or mobile devices with expensive data plans. Therefore, the ability for a user to load and cancel loading large items is valuable.

Say you need to load a very large photo (in this case, 22 MB in size) from Wikipedia. You want to define a button that fetches the photo and another button that aborts the loading. Here’s how the program will look:

You can see a live example of this program here:

https://eloux.com/async_js/examples/abort_ex08_complete.html

First, define an HTML <image> element ...