Вопрос по jquery, javascript – загрузить строку HTML в JQuery без запроса изображений

10

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

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

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

Спасибо

Ваш Ответ

4   ответа
3

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

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

Modify the image tags before giving the HTML to jQuery so their .src properties are gone or are empty or the <img> tags aren't image tags or are no longer present.

Use something other than this type of jQuery to parse your HTML to prepare it for selector operations.

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

@Julian - Вопрос не говорит о том, что строка должна быть неизменной, и нет причины, по которой она должна быть. Это просто строка, и ее можно легко изменить с помощью регулярного выражения или другого анализа строки или даже анализа HTML. Если оригинал необходимо сохранить для других целей, копию можно изменить и использовать. Кроме того, если он неизменен, то ответ на его вопрос заключается в том, что онcannot загружаться в JQuery без загрузки изображений.
Я думаю, что мы должны предположить, что HTML неизменен.
5

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, могут работать не совсем так.

+1 О, это здорово!
Я думаю, что это будет работать в некоторых ситуациях. Однако в моей ситуации HTML-код поступает из RSS-канала, который я не контролирую, и, вероятно, вызовет ошибки синтаксического анализа. JamieD
HTML почти никогда не является действительным XML. XHTML, конечно, но есть причина, по которой он не используется широко.
3

например так

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

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

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

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

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

Похожие вопросы