Question

我有一個html字符串我想直接轉儲到一個元素。這個html字符串包含一些標籤，並且我需要在其src屬性的前面添加一個路徑。

目前，我正在做這樣的事情：

// note, htmlString is coming in from an external xml file... 
var htmlString = "<img src='img1.jpg'/><br/><img src='img2.jpg'/>"; 
var imgContainer = $('<div />'); 
imgContainer.append(htmlString); 

var prefix = "some/path/to/img/"; 
imgContainer.find('img').each(function(i, el) { 
    $(el).attr('src', prefix + $(el).attr('src')); 
}); 

這工作，但我看到了不預先考慮路徑的失敗的資源負載。好像瀏覽器試圖在創建imgContainer元素時立即加載圖像，即使它沒有附加到文檔中。我想避免那些失敗的負載。

我想我可以追加前解析htmlString但它是通過它的創建後，該元素不錯，只是$。每（）...

注：我已經通過問這個問題，創建一個有學問jQuery元素通過$(htmlString)立即導致在htmlString內的所有資源上加載嘗試。所以，我必須以某種方式操作htmlString，然後才能將其包裝到jQuery對象中。

Answer 1

您可以嘗試將htmlString解析爲XML，對其進行修改，然後將其附加到DOM。

像這樣的東西（不知道是否XMLSerializer作品在所有瀏覽器，我認爲這是在IE this.xml）：

var htmlString = "<img src='img1.jpg'/><br/><img src='img2.jpg'/>", 
imgContainer = $('<div />') 
xml = $.parseXML('<xml>'+htmlString+'</xml>'), // add `<xml>` because 
               // XML needs a root element 
prefix = "some/path/to/img/", 
// needed to convert XML to HTML 
sXML = typeof XMLSerializer !== 'undefined' && new XMLSerializer; 

$(xml).find('img').each(function(i, el) { // replace the SRC 
    $(el).attr('src', prefix + $(el).attr('src')); 
}); 

// Convert XML to HTML 
// http://stackoverflow.com/a/829724 
htmlString = $(xml).find('xml').contents().map(function(i,v){ 
    return v.xml || sXML.serializeToString(v); 
}).get().join(''); 

imgContainer.append(htmlString); 

DEMO：http://jsfiddle.net/de2dg/3/

Answer 2

你爲什麼不與正則表達式中提取圖像字符串並使用數組來保存圖像並最後添加所有內容？

var str = '<img src=\'img1.jpg\'/><br/><img src=\'img2.jpg\'/>', 
    patt = /\w+\d+\.(jpg|png|gif)+/g, // Probably could be better but works 
    imgs = str.match(patt), 
    prefix = 'some/path/to/img/', 
    output = ''; 
$.each(imgs, function(i, v){ output += '<img src="'+ prefix + v +'"/>'; }); 
$('<div />').append(output).appendTo('#el'); 

http://jsfiddle.net/DmKys/

Answer 3

一類直接在HTML的輸入如「隱藏」添加到圖像和與顯示的CSS定義它：無;它不會被首先繪製。

然後在您的每個循環中更改源後刪除此類。

編輯:(最後我知道他的意思） 將屬性從src更改爲pre_src，並在每個循環中使用此屬性來附加新的「src」屬性，並在此之後刪除pre_src。 [removeAttr（）] 因此，資源將不會被加載，你可以使用你的每個循環...