7

Let's say that I have two accordion tabs. The first one loads hundreds of images and is open when the page loads.

I want to be able to stop the images from downloading if the user clicks on the second accordion tab. Will changing the src attributes of the images via js stop the images from downloading? Or do the requests just continue until completion and not show up on the page?

pepsi
  • 6,785
  • 6
  • 42
  • 74
  • do you have the app online ? use firubug to find out or just give us the link and we could check ... I would like to know the answer as well :) – Tarek Sep 12 '11 at 16:19
  • You could just try it I guess... – Felix Kling Sep 12 '11 at 16:20
  • I believe it stops them but I'm not 100%. I wrote something a while ago that loads a lot of images as thumbnail and I manipulate the DOM while they're loading. I didn't actually think to souble check but I got the distinct impression they'd stopped. – jambox Sep 12 '11 at 16:22
  • I would think this is possibly browser dependent. I think you'd have to just try it and watch the network traffic on your computer with something like Fiddle (free network monitor) to see if the download actually stops. The other thing you could try is actually removing the DOM objects so they get freed by the garbage collector. – jfriend00 Sep 12 '11 at 16:23
  • You can stop it by detecting if the tab has focus (using document.hasFocus) and stop them from loading by using window.stop(), but you wouldn't be able to restart from the last point. – Some Guy Sep 12 '11 at 16:40

3 Answers3

2

I have a script that loads the SO logo in exactly 3 seconds that I had made for another question.

http://alexturpin.net/slowimage/slowimage.php

Using it, I tried to reproduce the problem:

var img = new Image();
img.onload = function() {
    alert("loaded");
};
img.src ="http://alexturpin.net/slowimage/slowimage.php";

setTimeout(function() {
    img.src = "";
}, 1000);

http://jsfiddle.net/Xeon06/RrUvd/1/

From what I gather, in Chrome, the onload doesn't get fired, but the browser keeps on showing a spinner and if I go on the network tab and find my image and check it's content, it's there. So my answer would be no, the image still loads, at least in Chrome.

This is an interesting problem, I suggest you try and test it in as many browsers as possible and write some kind of blog post on it.

Alex Turpin
  • 46,743
  • 23
  • 113
  • 145
2

Your browser asks for that image with a specific HTTP GET request, as specificated 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.

You can try window.stop() to stop all requests, but not individual ones.

If you wanted to stop a single request for a large image, what you could do is load the image into a document within a hidden IFRAME. The onload event of the IFRAME can be used to load the image into the main document, by which time it ought to be cached (presuming you have the caching directives configured to do so).

If the image is taking too long, then you can access the IFRAME's contentWindow and issue a stop command to that.

You need to have as many IFRAME elements as there are images that can be requested simultaneously.

Taken directly from here & here.

Community
  • 1
  • 1
loxxy
  • 12,990
  • 2
  • 25
  • 56
0

Not sure if it will, just like the other comments. But I can suggest am approach that will work well. Assuming not all the images are visible, just set the right src attribute when they become visible.

So default the url to myGray.gif when it is not visible and set it to myImage.jpg when it does come into view.

When you close the current accordion, you can set the image source back to your lightweight gif again. (this prevents a bug related with gc on some versions of the ipad).

Laurent Zuijdwijk
  • 611
  • 3
  • 6