├── README.md
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Cancelling Preloading of Images
2 |
3 | Experiment to understand which browser support cancelling preloading
4 | of images with two differerent techniques:
5 |
6 | ## Using `Image`
7 |
8 | ```javascript
9 | const i = new Image();
10 | i.src = url;
11 | setTimeout(() => {
12 | i.src = "";
13 | });
14 | ```
15 |
16 | ## Using `XMLHttpRequest`
17 |
18 | ```javascript
19 | const r = new XMLHttpRequest();
20 | r.open("get", url, true);
21 | r.send();
22 | setTimeout(() => {
23 | i.abort();
24 | });
25 | ```
26 |
27 | According to [@stereobooster's
28 | `react-ideal-image`](https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download) the first technique (using img = new Image(); img.src = "") doesn't work in Mobile Safari. That's a hugely popular browser so it's important to test if that's true.
29 |
30 | The purpose of this experiment is to help:
31 | [github.com/peterbe/autocomplete-with-images](https://github.com/peterbe/autocomplete-with-images)
32 |
33 | ## To run
34 |
35 | ```
36 | npx serve -s
37 | ```
38 |
39 | Then open `http://localhost:5000`
40 |
41 | Press the two buttons and see what happens.
42 | Ideally the image should not load!
43 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Cancelling Preloading of Images
6 |
7 |
8 |
14 |
15 |
16 |
17 | Cancelling Preloading of Images
18 |
19 |
20 |
23 |
26 |
27 |
28 | Log
29 |
30 |
31 |
32 | Repo here:
33 | github.com/peterbe/cancelling-preloading-images
34 |
35 |
36 |
110 |
111 |
112 |
--------------------------------------------------------------------------------