Alex Rivera | Logout

How do I abort image <img> load requests without using window.stop()

Asked 2011-08-03T16:13:06.697
48

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:

javascript jquery html ajax image
Edit
Report

2 Answers

1

BTW, another idea that might work:

1) create a new iframe

2) inside of the iframe have the script that starts loading the image, and once it's loaded, call the .parent's method

3) when in need, stop the iframe content loading using .stop on the iframe object

answered 2011-08-10T15:22:10.020
0

Maybe you could serve the image through a php script which would check a field in the the db (or better yet a memcached) that would indicate stop loading. the script would portion up the image into chunks and pause in between each chunk and check if the stop flag for the particular request is. If it is set you send the header with A 204 no content which as soon as the browser gets it will stop receiving.

This may be a bit over kill though.

answered 2011-08-13T05:35:19.887

Your Answer