Does changing the src attribute of an image stop the image from downloading?

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?

---

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.

---

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.

---

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).

链接地址: http://www.djcxy.com/p/54742.html

上一篇: 类静态？

下一篇: 更改图像的src属性是否会阻止图像下载？