I have a very long page that dynamically loads images as users scroll through.

However, if a user quickly scrolls away from a certain part of the page, I don't want the images to continue loading in that now out-of-view part of the page.

There are lots of other requests happening on the page simultaneously apart from image loading, so a blunt window.stop() firing on the scroll event is not acceptable.

I have tried removing & clearing the img src attributes for images that are no longer in view, however, since the request was already started, the image continues to load.

Remember that the image src was filled in as the user briefly scrolled past that part of the page. Once past though, I couldn't get that image from stop loading without using window.stop(). Clearing src didn't work. (Chrome & FF)

Similar posts I found that get close, but don't seem to solve this problem:

• Stop loading of images with javascript (lazyload)?
• Javascript: Cancel/Stop Image Requests
• How to cancel an image from loading

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:

1. if your user scroll frenetically up and down the page, he/she will expect some loading delays.
2. 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
3. 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 :

1. your page should display DIV containers with the width and height of the expected image size (use CSS to style). Inside of each DIV, add an link. For example :

   <div class="img-wrapper thumbnail">
      <a href="http://www.domain.com/path/to/image">Loading...</a>
   </div>
   

2. 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();
      }
   };
   
   });
   

The typical rule of thumb when it comes to using CSS sprites for images is that you should only do it for smaller images (like icons) and that actual image content should always be represented through <img> elements. My question is: why? Aren't the advantages of spriting worthwhile for content images as well?

One reason I have read is to enable the use of alt text, to be more syntactically correct and accessible to screen-readers. However, when that is a concern, couldn't you just as easily use a single tiny transparent image with all the syntactical sugar atop a sprite that presents the real visual content?

You could, but:

1. Content images don’t tend to be re-used as much as UI-type images like icons. Imagine a newspaper site: if every content image they used were part of a sprite, that sprite would very quickly get huge, and would be downloaded even by users who only looked at one story.

2. Website content is generally expected to be maintained by people who don’t know CSS. It’s a bit unreasonable to expect content editors to edit a master sprite image file, re-save out to a JPG, and some CSS just to put an image on a page.

3. If you sprite a lot of large image files, the sprite file is really large. It might take an unacceptably long time to download when the user first visits the page, or it might use up too much bandwidth on users who only end up seeing one of the images within the sprite.

Obviously, those are generalisations — in a specific situation, it might make perfect sense to sprite larger/moe contenty images.

On using an <img> tag with a tiny transparent image file for sprites, you can do that for any sprite images — it’s often useful for clipping and positioning the sprite image beyond what background-position allows.

I have a tall image inside a short container with overflow: hidden;. The bottom of the image is cut off. How do I make the top get cut off instead of the bottom?

give the container the following css:

position:relative;

and the image the following css:

position:absolute;
bottom:0px;

P.S.
Very nice (and clear) illustrations btw