在附加元素之前如何解析它的内容？ （jQuery）

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 但在创建元素后只需 $.each() 就很好了...

注意： 我通过问这个问题了解到通过创建一个 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);

演示：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 输入中向图像添加一个类，例如“hidden”，并在 css 中使用 display: none; 定义它；它不会首先被绘制。

然后在更改源后在每个循环中删除此类。

编辑：（终于我知道他的意思了）
将属性从 src 更改为 pre_src 之类的任何属性，并在每个循环中使用此属性附加一个新的“src”属性，然后删除 pre_src 。 [删除属性()]
所以资源不会被加载，你可以使用你的每个循环......