Запретить загрузку изображений при разборе jQuery AJAX без DOM

Question

Я использую jQuery ajax-запрос для захвата и анализа HTML на вторичной странице. Глядя на панель «Сеть» Chrome и FF, я заметил, что она также будет загружать изображения оттуда - но только когда я загружаю результат, используя $ (data) в обратном вызове «success».

Контент НЕ загружается в DOM текущей страницы, поэтому я действительно немного растерялся, почему это происходит.

Но в любом случае, просто спросили, есть ли способ предотвратить это? Мне нужно получить информацию о результате, но она никогда не попадет в основной DOM. Будут ли работать скрипты, которые предотвращают загрузку изображения до тех пор, пока представление не будет работать, или это никогда не сработает против загруженного элемента? Обратите внимание, что это приложение для пользователя, поэтому я не совсем контролирую целевой HTML.

Спасибо!

Answer 1

Причина , почему это происходит, заключается в том, что как только вы создаете изображение со свойством src, оно загружается. Например:

var image = document.createElement('img');
image.src = 'example.png';

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

Поскольку jQuery встраивает строку HTML в структуру DOM, он создает элементы img почти так же, как и в приведенном выше фрагменте. Когда элемент изображения появляется, даже до его добавления в DOM, файл загружается с сервера.

Самое простое решение - удалить все теги img из HTML, прежде чем добавить его:

html = html.replace(/<img\b[^>]*>/ig, '');

Если это не вариант и вам нужны элементы img, вы можете переименовать атрибуты src во что-то другое или удалить атрибуты, если они вам не нужны.

Answer 2

Вы можете найти и удалить все теги изображений из возвращенной строки перед загрузкой в ​​DOM.

Это регулярное выражение для изображений HTML:

<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)*

Answer 3

Ваша проблема - загрузка текста ответа в элемент jQuery ($(data)).Это на самом деле создает DOM для загруженного контента, даже если вы не добавляете его в «основной» DOM.

То, что вы должны попытаться сделать, это сохранить этот текст вне jQuery и обрабатывать его либо в текстеуровень с помощью регулярных выражений, или загрузить его в документ XML и запросить его с помощью различных доступных методов XML.

Если вы хотите использовать jQuery и остановить загрузку, вы можете попробовать прочитать здесь: Javascript: Cancel /Стоп изображения запросов