Menu
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:
538
To cancel the loading of an image the abort event is used. So the image accessing at any point is done by loading the image. The abort event is used whenever one wants to terminate a specific operation.
The onError() event handler is invoked when an error occurs during image loading, such as when the specified URL refers to a corrupt image data. The onAbort() handler is invoked if the user aborts the image load (for example, by clicking the Stop button in the browser) before it has finished.
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:
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 each DIV, 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
