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
DIVcontainers 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(); }};});
Well, my idea:
1) initiate an AJAX request for the image, if it succeeds, the image goes to the browser cache, and once you set the 'src' attribute, the image is shown from the cache
2) you can abort the XHR
I wrote a tiny server with express emulating the huge image download (it actually just waits 20 seconds, then returns an image). Then I have this in my HTML:
<!DOCTYPE html><html> <head> <style> img { width: 469px; height: 428px; background-color: #CCC; border: 1px solid #999; } </style> </head> <body> <img data-src="./img" src="" /> <br /> <a id="cancel" href="javascript:void(0)">CANCEL</a> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function () { var xhr, img = $('img'), src = img.data('src'); xhr = $.ajax(src, { success: function (data) { img.attr('src', src) } }); $('#cancel').click(function (){ xhr.abort(); }) }); </script> </body></html>
You can load your images using ajax calls, and in case that the uses scrolls-out, you can abort the calls.
In jQuery pseudo-code it would be something like that (forgive me mistakes in syntax, it is just an example):
1) tag images that you want to load
$(".image").each( function(){ if ( is_in_visible_area(this) ) { // check [1] for example $(this).addClass("load_me"); } else { $(this).addClass("dont_load"); }});2) load images
ajax_requests = {};$(".image.load_me").each( function(){ // load image var a = $.ajax({ url: 'give_me_photos.php', data: {img: photo_id}, success: function(html){ photo_by_id(photo_id), img.append(html); } }); ajax_requests[photo_id] = a;});3) cancel loading those out of the screen
for( id in ajax_requests ) { if ( ! is_in_visible_area(id) ) { ajax_requests[id].abort(); }}Of course, add also some checking if the image is already loaded (e.g. class "loaded")