在頁面加載原始src之前更改圖像SRC

現在，我正在使用以下JQuery代碼來更改頁面上的所有圖像SRC，以訪問具有較高帶寬限制的我的其他圖像服務器。在頁面加載原始src之前更改圖像SRC

$.each($("img"), function(index, value) { 
    srcValue = "http://different-server.com/" + $(this).attr("src") 
    $(this).attr("src", srcValue) 
});

所以

src="v/image1.jpg" 
src="v/image2.jpg" 
src="v/image2.jpg"

將成爲：

src="http://different-server.com/v/image1.jpg" 
src="http://different-server.com/v/image2.jpg" 
src="http://different-server.com/v/image3.jpg"

用戶正在使用Volusion他們的購物車。他們被迫在Volusion的服務器上託管他們的購物車，這些服務器每月只允許3GB的帶寬使用量，並且他們收取很多費用。

購物車內置ASP，但我無法訪問ASP頁面，只能訪問模板文件，我們不允許將產品圖像鏈接到外部源。

我成功地可以下載購物車產品的圖像文件，並將它們託管在另一臺沒有帶寬限制的主機上，但我覺得這段代碼在瀏覽器加載原始圖像SRC之後更改了src，帶寬使用問題仍然存在。

客戶端不願意切換到自託管選項，因此我需要找出一種解決方案，儘可能減少帶寬使用，以便將來不會過度使用。

還有什麼我可以做更多的事情來強制在頁面加載之前更改圖像srcs，因爲我只能訪問編輯模板文件？

謝謝。

來源

2015-02-06 AndrewMRiv

爲什麼不把'src'留在最初的HTML中，並用JS填充它。 – Barmar 2015-02-06 18:11:09

不幸的是，Volusion的限制阻止了我這樣做。否則，這將是一個好主意。我們只有一個HTML文件來編輯模板。將圖像添加到購物車頁面的唯一方法是通過它們的GUI並將圖像上傳到其服務器。所以這就是爲什麼我要去嘗試更骯髒的戰術。 – AndrewMRiv 2015-02-06 18:22:25

從客戶端Javascript，您不能在瀏覽器開始加載之前在頁面的HTML中更改img.src。你不能單獨從客戶端Javascript解決你的問題。

原因是你不能用Javascript修改DOM對象，直到它被瀏覽器解析併成爲DOM的一部分，並且在完成時，瀏覽器可能已經開始從原始URL加載圖像。所以，你卡住了。您無法使用Javascript直到它已經開始加載，這意味着您的低帶寬服務器已經看到了請求，然後才能更改URL。

這裏真正的解決方案（我猜你知道）是更改頁面的HTML來修復URL。或者，如果您希望通過Javascript設置圖像的主機名，那麼您可以更改img標籤以使用data-src屬性，並且不需要src屬性，然後您可以使用Javascript將src屬性設置爲您想要的屬性。這是可行的，因爲當圖像沒有src屬性時，瀏覽器可以解析<img>標籤，但不會開始加載任何東西（因爲沒有src屬性）。

也可以使用配置爲重寫圖像URL的服務器端代理。

來源

2015-02-06 18:40:21 jfriend00

我有一個想法，你要去哪！問題是，在編輯HTML時，我們只能真正編輯標題，菜單，頁腳等，而不是內容區域。在模板文件中，有一個類爲「content_area」的空div，並且所有頁面內容都被ASP（我不幸無法訪問）拋出。我無法真正編輯HTML的任何圖像如何顯示在頁面上，因爲這屬於拋入「content_area」div的內容。我能以某種方式解決這個問題嗎？ – AndrewMRiv 2015-02-06 18:55:01

@AndrewMRiv - 我知道你不希望這是答案，但「不」不存在客戶端變通方法。您可以用JS重寫圖像URL，並且「希望」會減少使用的帶寬，因爲可能某些瀏覽器將停止加載已經啓動的圖像，現在源URL已更改。但坦率地說，這種行爲在瀏覽器和瀏覽器之間會有所不同（你必須用未緩存的圖片進行測試，看看它是否有用），但它肯定不會阻止低帶寬服務器的所有用法，並且說實話我不知道如果它甚至會減少帶寬使用。 – jfriend00 2015-02-06 19:00:20

@AndrewMRiv - 僅供參考，有可能合法的安全原因爲什麼提供者不需要購物車中的外部加載資源。沒有很好的理由將帶寬使用限制在這麼低的數量 - 有更好的提供商不會這麼做，或者會有更合理的帶寬收費。 – jfriend00 2015-02-06 19:01:59

每個Volusion產品都有兩個字段，您可以在其中指定URL，照片URL小和照片URL大。這可以指向產品圖像的內部或外部位置。

來源

2015-02-07 17:43:07 user357034

在頁面加載原始src之前更改圖像SRC

回答

相關問題