2011-10-24 33 views
1

我有一個網絡應用程序,用其他img替換少數img。在Javascript中壓縮圖像源代碼路徑

例如:帶有路徑http://example.com/example/example/images/dir/1.gif的圖像用http://cdn.example.com/dir/1.gif進行了重新處理。

爲此,我使用jQuery attr()。

所以我的代碼看起來是這樣的:

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif"); 
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif"); 
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif"); 
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif"); 
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif"); 
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif"); 
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif"); 
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif"); 
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif"); 
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif") 

那麼,有沒有一種方法來壓縮呢?所以它是用較少的字符寫成的?

注意:在每一行中,兩個網站上的圖像都是相同的。例如,1.gif被替換爲1.gif,但是不同的服務器。 所以基本上我想更換服務器。當http://www.example.com/dir/images/dir/替換爲http://cdn.example.com/dir/

非常感謝

+0

使用'爲'循環。 – zzzzBov

+1

如果這是出於性能原因(帶寬分配),你應該做這個服務器端。 – Phil

+0

+1 Phil,使用CDN提高性能,但如果你在頁面加載後這樣做,即舊圖像已經加載,然後你正在進行替換,那實際上使性能變得更糟 –

回答

1

這是因爲使用循環一樣簡單:

var i; 
for (i = 1; i <= 10; i++) 
{ 
    $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif'); 
} 

還是你要求找到並替換所有?

您可以使用attr starts with selector

$('img[src^="http://www.example.com/"]').each(function(index,element){ 
    var $this, src, newSrc; 
    $this = $(this); 
    src = $this.attr('src'); 
    //do your replacement here 
    newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
    $this.attr('src', newSrc); 
}); 

爲莫恩扎曼指出,ATTR接受一個函數作爲參數,以及,從而縮短這個腳本:

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){ 
    return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
}); 
+0

對此使用循環是矯枉過正的。屬性選擇器是更好的,但你不需要。每個 –

+2

@MoinZaman,你在說什麼? – zzzzBov

+0

@zzzzBov謝謝。圖像名稱是隨機的。可以是任何東西,所以我第一個選項不會工作。至於第二種選擇,你可以解釋我的IMG [src^=「?爲什麼我必須包括^? – jQuerybeast

1

您需要使用帶有正則表達式的JavaScript的.replace()方法來替換內容。

在jQuery中屬性選擇器^=表示尋找以開頭的屬性值。

試試這個,我假設其以「www.example.com」開頭的圖片:

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src', 
    function(i,src){ 
     return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
}); 
+1

想解釋投票嗎? –

+0

反對並不是來自我。感謝您的回答。我會在一段時間內檢查它。 – jQuerybeast

+0

不用擔心,我想我知道誰是downvote是:) –