How do I abort image img load requests without using window.stop()
What you are trying to do is the wrong approach, as mentioned by nrabinowitz. You can't just "cancel" the loading process of an image (setting the src
attribute to an empty string is not a good idea). In fact, even if you could, doing so would only make things worst, as your server would continually send data that would get cancelled, increasing it's load factor and slow it down. Also, consider this:
- if your user scroll frenetically up and down the page, he/she will expect some loading delays.
- having a timeout delay (ex: 200 ms) before starting to load a portion of the page is pretty acceptable, and how many times will one stop and jump after 200 ms interval on your page? Even it it happens, it comes back to point 1
- how big are your images? Even a slow server can serve about a few tens of 3Kb thunbnails per second. If your site has bigger images, consider using low and hi resolution images with some components like lightBox
Often, computer problems are simply design problems.
** EDIT **
Here's an idea :
your page should display
DIV
containers with the width and height of the expected image size (use CSS to style). Inside of eachDIV
, add an link. For example :<div class="img-wrapper thumbnail">
<a href="http://www.domain.com/path/to/image">Loading...</a>
</div>Add this Javascript (untested, the idea is self describing)
$(function() {
var imgStack;
var loadTimeout;
$(window).scroll(function() {
imgStack = null;
if (loadTimeout) clearTimeout(loadTimeout);
loadTimeout = setTimeout(function() {
// get all links visible in the view port
// should be an array or jQuery object
imgStack = ...
loadNextImage();
}, 200); // 200 ms delay
});
function loadNextImage() {
if (imgStack && imgStack.length) {
var nextLink = $(imgStack.pop()); // get next image element
$('<img />').attr('src', nextLink.attr('href'))
.appendTo(nextLink.parent())
.load(function() {
loadNextImage();
});
// remove link from container (so we don't precess it twice)
nextLink.remove();
}
};
});
How to cancel an image from loading
Quick answer
Setting the src
attribute of the img
tag to the empty string will interrupt the current download, even on Chrome.
Details
Nowadays most of browsers implemented that out-of-standard mechanism thought in the old answer to programmatically abort the connection. This is not achieved through a protocol request, but with a client-side in-memory operation. Keep in mind that is not a standard behaviour, but most of vendors courtesy. That is, it could not work on every browser.
I've prepared a jsfiddle showing this mechanism in action (keep an eye at the network panel of the inspector).
Old answer (2011)
Your browser asks for that image with a specific HTTP GET request, as specified in HTTP protocol. Once it asks for it, the http server starts the transfer.
So, it is between the browser (as http client) and the http server.
Since http protocol does not takes into account the option to abort a transfer, the browser should implement a out-of-standard mechanism to programmatically abort the connection. But since this is not specified in any standard, i think you won't find any way to do that with javascript or any client side code.
Javascript: Cancel/Stop Image Requests
I had the exact same issue, when users 'paged' quickly through (ajax) search results the browser was still trying to download profile images for every page not just the current one. This code worked for me, called on the paging event just before the new search was run:
//cancel image downloads
if(window.stop !== undefined)
{
window.stop();
}
else if(document.execCommand !== undefined)
{
document.execCommand("Stop", false);
}
Essentially it's like clicking the "Stop" button on the browser.
Tested in IE, FireFox, Chrome, Opera and Safari
Cancel single image request in html5 browsers
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 thebody
in theiframe
- when the
img.onload
completes, you can use that image dom element to draw to an html5 canvas withdrawImage()
- if you want to cancel the load, issue a
stop()
on theiframe
'scontentWindow
(orexecCommand("stop", false)
oncontentDocument
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.
Related Topics
How to Get the Status Code from an Http Error in Axios
What Is "Function*" in JavaScript
Add St, Nd, Rd and Th (Ordinal) Suffix to a Number
Overriding a JavaScript Function While Referencing the Original
Enable/Disable Submit Button If Checkbox Is Checked/Unchecked
Avoid Window Jump to Top When Clicking #-Links
Shorthand Http:// as // for Script and Link Tags? Anyone See/Use This Before
Value Was Evaluated Just Now with Console.Log on JavaScript Object
Can JavaScript Access Iframe Elements from the Parent Page
How to Simulate Key Presses or a Click with JavaScript
How to Pass the This Context to a Function
How to Solve 'Redirect Has Been Blocked by Cors Policy: No 'Access-Control-Allow-Origin' Header'
Uncaught Typeerror: Cannot Read Property 'Msie' of Undefined - Jquery Tools
Internet Explorer 11 Detection
Encrypt in PHP Openssl and Decrypt in JavaScript Cryptojs
How to Make a <Div> Move Up and Down When I'm Scrolling the Page