Can an image load request be stopped while data is being retrieved?

Question

I'm developing a web application that is highly dependent on pre-loading images before displaying them to the user. However, depending on the user's actions, it would sometimes be important to terminate the loading of an image before it has a chance to finalize, so as not to waste bandwidth. Is it possible to do this? If so, how exactly?

Answer 1

I don't think it is possible to stop an image you have already asked to be pre-loaded.

In any case, even if you try to terminate a connection after an image has been requested, it is very likely that the server will complete the data transfer even if the client doesn't accept it (which means the bandwidth is still wasted).

The best you can do, is the pre-load the images one at a time with javascript. That way, if you want to stop loading images, you can stop pre-loading the remainder of the images, even if the currently loading image cannot be stopped.

---

If you use jQuery, you can try abort an AJAX request.

Abort Ajax requests using jQuery

by using the jQuery.ajax() function to pre-load your images. The XMLHttpRequest object has an abort() method you can call.

However, this is not really documented. The ajax() function is not designed to load images. The image you get from this function will be weird binary which is unusable. (Because the no image format is supported, it will interpret it as text)

However, assuming the browser is doing what it is supposed to be doing, the image may be cached. If it is cached, then it will be pre-loaded, and you can just reference the same url to use it.

Caching is heavily influenced by whatever headers are returned by your server as to how long the image is valid for before it should expire the cache.

Answer 2

Yes, you can use HTTP streaming and special AJAX methods to accomplish this.

Encode each image on the server into a base64 string. NOTE: this increases the payload size by ~33%! For PHP, take a look at base64_encode function

Split the base64 encoded string into however many n byte-sized chunks. Print each chunk and flush the output buffer each time. There are some good tips in the comments section of flush on php.net

Depending on how you implement the AJAX calls, you can abort the XMLHttpRequest which forces the browser to close the connection. Here is more info on a persistent checking method http://ajaxpatterns.org/HTTP_Streaming#Streaming_Wiki_Demo

When the ajax call completes and all the data has been downloaded, you can simply create the image in the browser using a data url: data:image/png;base64,ENCODED_DATA

You might also want to take a look at this http://ajaxpatterns.org/archive/HTTP_Streaming.php

Answer 3

I found an acceptable (more or less) solution to my problem on Javascript: Cancel/Stop Image Requests and applied it like this:

var img = new Image();
img.src = "IMG_0111.JPG";
var timer = setTimeout(function(){
        window.stop();
        document.execCommand("Stop", false);                                            
    },50);

This achieves the result I was looking for, although I'm afraid it puts an end to all other HTTP requests as well.