Загрузить HTML-строку в jQuery без запроса изображений

Есть ли способ загрузить HTML-строку, содержащую теги изображений в jQuery, без запроса изображений? Я хочу, чтобы иметь возможность запускать селекторов на объекте jQuery, чтобы извлечь некоторую информацию. Взяв следующий пример:

var string = $('<p><img src="http://image.url/file.jpg" /></p>');
string.find('img');

Браузер выполнит запрос http://image.url/file.jpg. Я пытаюсь найти способ сделать то же самое, но без браузера, делающего запрос на изображение.

Спасибо

Ответы

Ответ 1

Вы можете использовать XML-документ для выполнения поиска:

function searchXml(xmlStr, selector) {
    var parser, xmlDoc;
    if(window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(xmlStr, "text/xml");
    } else {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(xmlStr); 
    }
    return $(xmlDoc).find(selector);
}

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));​​​​

Смотрите в действии: http://jsfiddle.net/na9Tt/

Имейте в виду, что это документ XML, а не HTML-документ, поэтому некоторые типы поиска, специфичные для HTML, могут работать не точно так же.

Ответ 2

Вам нужно четко указать границы вашего вопроса. Если у вас есть вопрос: "Есть ли способ загрузить этот точный HTML (без его изменения) в объект jQuery (например, вы делаете), не вызывая загрузки изображений", тогда ответ будет НЕТ. jQuery создает временный родительский объект и присваивает ваш HTML свойству innerHTML, что заставляет браузер полностью анализировать этот HTML-код, который будет загружать URL-адреса изображений.

Итак, если вы хотите запускать операции селектора в этом HTML без загрузки изображений, у вас есть несколько вариантов:

  • Измените теги изображений перед тем, как передать HTML в jQuery, чтобы их свойства .src исчезли или пусты или теги <img> не являются тегами изображений или больше не присутствуют.

  • Используйте что-то другое, кроме этого типа jQuery, чтобы проанализировать ваш HTML-код, чтобы подготовить его для операций селектора.

Если вы раскрыли немного больше о том, почему вы пытаетесь это сделать или что вы пытаетесь сделать с помощью операций селектора, мы могли бы предложить больше альтернатив.

Ответ 3

Вы можете добавить путь к другому атрибуту, например

<img id="imgid" src="" data-src="/path_to_image">

а затем вы можете заменить атрибут src на data-src, когда вам нужно. Что-то вроде этого

$('#imgid').attr('src',$('#imgid').attr('data-src'));

Ответ 4

Это только Chrome, насколько я знаю, нашел здесь, первый метод на этой странице может не работать, если строка не действительный HTML, второй работает отлично. Не создает запросы к изображениям и не пытается выполнить встроенные скрипты (что идеально подходит для моего варианта использования - фоновые задачи расширения Chrome).

var doc = document.implementation.createHTMLDocument("");
doc.body.innerHTML = htmlString;