加載失敗後，如何讓瀏覽器重試？

我做了一個Chrome擴展，爲了減少帶寬使用，它停止了所有的輸出請求，這些請求是圖像。加載失敗後，如何讓瀏覽器重試？

我想提供的功能，如果用戶點擊圖像（或技術上a layer on top of that image）它會嘗試重新加載圖像，這次不會被擴展名阻止。

如何讓瀏覽器重試加載圖像？如果沒有一個簡單的方法來做到這一點，那將是一個什麼工作？從DOM中刪除舊圖像並再次添加它？

任何幫助表示讚賞。 :)

編輯1：

要回答@ CBroe的問題：

在後臺腳本中使用chrome.webRequest.onBeforeRequest API。

要回答@ jfriend00的問題：

常用的佔位符「無法加載圖片」圖標，我猜也被稱爲「破文件」圖標：

broken file icon example

查看所有這些碎圖片？

該屏幕截圖還說明了在另一圖像頂部的圖層。如果這些圖像不被破壞，加載的圖像將在那裏，但該圖層（顯示圖像尺寸的深灰色圖像）仍然存在。

所需href仍然存在那裏的img標籤：

example of a broken img tag which retains href

來源

2014-11-09 greduan

那你怎麼「停止」這些要求呢？ – CBroe 2014-11-09 01:35:50

而且，在點擊DOM之前DOM中的圖像是什麼？看起來我們需要查看正在點擊的內容以及所需的href的存儲位置。 – jfriend00 2014-11-09 01:36:26

@CBroe在編輯中爲您的評論添加了答案。 :) – greduan 2014-11-09 01:57:08

如果簡單地分配相同的src值到img元素不enough¹，然後在JavaScript中創建一個新的Image對象，並賦值給它src財產。

¹這可能不是，如果瀏覽器才行，「嘿，這是爲src屬性的img已經有相同的值，所以我沒有做任何事情「 - 創建一個新的JS Image對象應該讓瀏覽器再次請求該資源，如果他意識到他沒有緩存已經。

來源

2014-11-09 03:15:43 CBroe

我會做的，而不是與您的分機圖像替換的圖片的網址。 1x1像素透明GIF或PNG。

當你這樣做時，添加一個屬性到你替換的所有元素上......類似data-yourextension-originalurl，帶有原始圖像的URL。如果用戶想要加載圖像，則很容易返回並修復這些圖像元素。

來源

2014-11-09 02:00:28 Brad

這是我最後的結局，儘管它沒有回答原來的問題，但它仍然是最正確的答案。非常感謝你。 :)我沒有接受，因爲它不提供原始問題。 – greduan 2014-11-10 02:19:40

儘管我對Chrome API不太熟悉，但是快速瀏覽似乎表明，無法從每個onBeforeRequest獲取特定的img元素，您需要知道這些元素才能確定在何處附上自定義代碼。

這可能會更好地用某種本地JavaScript實現。例如，如果Chrome允許您在加載時注入代碼，則可以在文檔加載之後但在圖像加載之前將類似下面的函數應用於所有img元素。

// Given an img element, replaces its src with a placeholder URL, 
// and sets its click action to load its original src 
function makePlaceholder(elem){ 
    elem["data-oldtitle"] = elem.title; 
    elem["data-oldhref"] = elem.href; 
    elem["data-oldsrc"] = elem.src; 
    elem["data-oldonclick"] = elem.onClick; 
    elem.title = "Click to load the blocked image."; 
    elem.href = ''; 
    elem.src = "http://example.com/placeholder.png"; 
    elem.onClick = function(){ 
     this.src = this["data-oldsrc"]; 
     this.title = this["data-oldtitle"]; 
     this.href = this["data-oldhref"]; 
     this.onClick = this["data-oldonclick"]; 
    }; 
}

來源

2014-11-09 03:00:48 Beejor

簡單的方法來強制重新加載在JavaScript中的形象是：

var img = document.getElementById("myImage"); 
img.src = img.src.replace(/\?.+/,"") + "?" + new Date().getTime();

這增加了一個獨特的QueryString以基本上強制瀏覽器不使用圖像的緩存版本的圖片。

來源

2014-11-09 21:36:23 ic3b3rg

您不知道原始查詢字符串不是必需的。你的代碼將它吹走並用你自己的代碼替代它。 – Brad 2014-11-10 00:02:44

@Brad很可能不可能是原始的'src'實際上指定了一個查詢字符串，並且該代碼可以很容易地適用於使用原始查詢字符串的情況。 – ic3b3rg 2014-11-10 03:28:49

我不會說這是不可能的。我曾參與過幾個項目，並且看到很多網站都很常見。您應該調整自己的代碼以正常工作，這樣人們就不會盲目地複製和粘貼您在此處的內容並打破頁面。 – Brad 2014-11-10 03:31:08

加載失敗後，如何讓瀏覽器重試？

回答

相關問題