Does the src attribute of an image change an image that is not loading?

Question

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

I want to be able to stop downloading images if the user clicks the second tab of the accordion. Will the src attributes of the image via js change the stop loading of images? Or do requests just continue to completion and do not appear on the page?

Answer 1

I have a script that loads the SO logo in exactly 3 seconds, which I did 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 collect, onload does not start in Chrome, but the browser continues to display a counter, and if I go to the network tab and find my image and navigate its contents, it is. So my answer will 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 entry on it.

Answer 2

Your browser requests this image with a specific HTTP GET request, as defined in the HTTP protocol. As soon as he asks for it, the http server starts the transfer.

So this is between the browser (as an http client) and the http server.

Since the http protocol does not take into account the possibility of interrupting transfers, the browser must implement a non-standard mechanism for programmatically interrupting the connection. But since this is not specified in any standard, I think you will not find any way to do this using javascript or any client-side code.

---

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

---

If you want to stop one request for a large image, then what you can do is load the image into a document in a hidden IFRAME. the onload IFRAME event can be used to load an image into the main document to which it should be cached (it is assumed that you have caching directives configured for this).

If the image takes too much time, you can access the IFRAME contentWindow and issue the stop command.

You should have as many IFRAME elements as there are images that can be requested at the same time.

Taken right from here and here .

Answer 3

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

So the default URL is myGray.gif when it is not displayed, and set it to myImage.jpg when it appears.

When you close the current accordion, you can set the image source to your light GIF again. (this prevents the gc-related error in some versions of ipad).