Question

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?

Answer 1

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.