如何取消加載圖像

Question

假設在 Javascript 中，您將 SRC 分配給 IMG 標簽。 這是一個很大的 SRC，你想在它完成加載之前取消它。 將 SRC 分配給另一個圖像不會停止加載數據。

也就是說，在加載過程中，您可以將 SRC 分配給另一個較小的圖像，較小的圖像將被加載並出現在您的瀏覽器中。 但是，原始 SRC 仍在繼續下載。

同樣，刪除IMG節點也不會阻止SRC繼續下載。 請不要猜測，請查看重現步驟。

復制品

1. 在 Chrome 中加載這個 URL Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm

2. 按 CTRL-SHIFT-J 打開開發人員面板

3. 在 Chrome 開發人員面板的頂行圖標上，單擊網絡圖標以觀看網絡活動。

4. 在第 1 步加載的 web 頁面上，單擊“加載圖像”按鈕，然后在開發人員面板中觀察大型 (32meg) 圖像開始加載。

5. 在 web 頁面上單擊嘗試取消按鈕以加載不同的圖像。

6. 加載了一個小圖像，但在開發人員面板中觀察 .network 並注意到大圖像繼續下載。

Answer 1

快速回答

將img標簽的src屬性設置為空字符串會中斷當前下載，即使在 Chrome 上也是如此。

細節

如今，大多數瀏覽器都實現了舊答案中認為的不合標准的機制，以編程方式中止連接。 這不是通過協議請求實現的，而是通過客戶端內存操作實現的。 請記住，這不是標准行為，而是大多數供應商的禮貌。 也就是說，它無法在所有瀏覽器上運行。

我准備了一個jsfiddle 來展示這個機制的作用（留意檢查器的網絡面板）。

---

舊答案（2011）

您的瀏覽器使用特定的 HTTP GET 請求請求該圖像，如 HTTP 協議中指定的那樣。 一旦請求，http 服務器就開始傳輸。

因此，它位於瀏覽器（作為 http 客戶端）和 http 服務器之間。

由於 http 協議沒有考慮中止傳輸的選項，瀏覽器應該實現一個不合標准的機制來以編程方式中止連接。 但是由於這沒有在任何標准中指定，我認為你不會找到任何使用 javascript 或任何客戶端代碼來做到這一點的方法。

Answer 2

雖然我現在找不到錯誤報告，但我相信這是一個長期記錄的 WebKit 錯誤。 Firefox（和我認為的 IE）有更理智的行為。 我想回想一下，但如果我回想起那些瀏覽器，重置 img.src 實際上會取消未完成的下載。 我很肯定 Firefox 在下載“排隊等候”以獲取打開 HTTP 連接的機會時會這樣做，而且我似乎記得它有時實際上會強制關閉連接。

我從來沒有找到一種方法來誘使基於 WebKit 的瀏覽器取消正在進行的 img 下載，無論它只是排隊還是已經在積極下載。

如果您正在制作類似映射客戶端的東西並且需要對圖像進行更細粒度的控制，這真的很糟糕。

Answer 3

將 .src 屬性設置為空字符串應該會取消加載：

//load image from url
var img = new Image();
img.src = 'http://somedomain.com/image.jpg';

......

//cancel load
img.src = '';

Answer 4

使用透明 base64 編碼的 GIF 取消以避免額外的請求和在 android 上雙頁加載：

var img = new Image();
img.src = 'http://google.com/favicon.ico';

img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;'

Answer 5

是的，當 img 標簽具有 src="" 屬性時，頁面會在 Android 上下載兩次。
這仍然發生在最近的 Android 版本上。
我還沒有找到任何其他瀏覽器可以做到這一點。
但我找到了一個解決方案：使用沒有 src 屬性的 img 標簽。

Answer 6

src 屬性必須是有效的非空 URL因此 null 或空字符串是不合法的（即使它們有時有效）。

用：

img.src='http://xxxx';
img.onerror=null;

（見這里）

Answer 7

最終的答案是網絡工作者。 在 webworker 中加載圖像並停止 web worker 將停止圖像加載。

你可以從這個代碼中得到這個想法： https : //github.com/NathanWalker/ng2-image-lazy-load

Answer 8

這對我有用：

imageVarName.src = '';
imageVarName.onload = null;
imageVarName.onerror = null;

Answer 9

遺憾的是，將 src 設置為空字符串在基於 WebKit 的瀏覽器（如 Safari）中不起作用。這是 Stella 提到的錯誤報告的鏈接。

https://bugs.webkit.org/show_bug.cgi?id=6656