Removing from the DOM an image not yet fully loaded: is transmission aborted?

Question

An image (not cached) is added to the DOM; for example (using jQuery):

$('#hereItGoes').append('<img id="theImage" src="image.jpg" />');

The browser starts downloading the resource, it takes some time...

Before the image is fully loaded some kind of event triggers a callback that removes the image.

$('#theImage').remove();

Is the image resource transmission aborted?

More specifically, does this stop the server from sending (image) data?

---

To give some "context" to the question:

a long scrolling page is often designed to lazy-load images: only when images enter the viewport are loaded; as each of them is ready then is faded in and displayed to the user.

Now what if the user scrolls down the page quickly?

It may occurr the situation where many images enter the viewport (and start being downloaded) but exit before they're ready.

Keeping loading would waste bandwidth (and server resources).

Answer 1

No, this is not possible. This is because once you request a resource, it is requested asynchronously by your client-side code so that it won't block the rest of your DOM from loading.

In a more complex server side request, another client-side message can be sent to stop the server from continually processing the data for the response, but in the event that this is sending back an image, there's no point in trying to stop it.

This will have not hurt client-side DOM performance though, since you'll just be ignoring the server response.