Предотвращение загрузки изображений из сценария

У меня небольшая проблема с некоторыми тегами изображений. У нас есть служба (наследие), которая возвращает кучу HTML. Теги изображения здесь содержат относительные пути в их HTML, что относится к неправильной базе. Это достаточно просто для меня, чтобы исправить это - просто вложите его в div, выберите изображения и скриптируйте их URL.Предотвращение загрузки изображений из сценария

Проблема в том, что как только вы помещаете этот HTML в div, браузер запрашивает неправильный URL-адрес. Таким образом, консоль запирается с 404 предупреждениями для изображений, хотя весь смысл помещать их в div - это исправить проблему.

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

Как я могу не допустить, чтобы теги изображений загружали свои URL-адреса, пока я их не исправил?

Редактировать: У меня есть HTML в виде строки из запроса AJAX.

источник

2015-10-09 Puppy

Как вы положить, что HTML в DIV? Динамическая генерация HTML на сервере? AJAX, затем вставка JS? В обоих случаях, что мешает вам манипулировать HTML до его вставки? – Amadan

@Shilly Я не думаю, что это правильно - я видел, что браузеры запускают загрузки, просто создавая объект «Image» и устанавливая его свойство 'src', не добавляя ничего в DOM. В самом деле, это все предпосылки для большинства сценариев «предварительной загрузки изображений». – Alnitak

О, просто протестировали его в консоли, и вы правы. создание и тег изображения и использование setAttribute для изменения src будет автоматически загружать src, я didnt 'knwo, что еще, спасибо! Я удалю ответ. Изменить: угадайте, что обходной путь загружает html как text/plain и манипулирует строкой. – Shilly

Это может/не решить вашу проблему, так как у меня нет кода для оценки. Эти методы были успешно протестированы (без консольных ошибок) в Chrome/Edge/FF.

На основе вашего редактирования, где используется AJAX, добавив HTML строку, используя скрипт:

var el = document.createElement("DIV"); 
el.innerHTML = '<img src="wrong_path.jpg" />'; 
var imgs = el.getElementsByTagName("IMG"); 
imgs[0].src = "http://placehold.it/350x150"; 
document.body.appendChild(el);

Другой способ, который мог бы мог решить это может быть DOM-парсер, чтобы преобразовать строку в HTML, итерацию изображения и обновить их «src» и вернуть подмножество DOM для вставки в существующую DOM.

Src: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

Если нужно поймать вставку вручную инспектировать элемент вставлен, узел вставки DOM может быть использован:

Src: https://stackoverflow.com/a/18152595/2827823

document.body.addEventListener("DOMNodeInserted", function (evt) { 
    if (evt.target.tagName == "IMG") {   
     evt.target.src = "http://placehold.it/350x150"; 
    } 
}); 

document.body.innerHTML = '<img id="foo" src="wrong_path_bar.png"/>';

Если нужно catch эти генерируемые ошибки без ручного поиска, может использоваться обработчик событий ошибки:

Src: Alter the prototype of an image tag?

window.addEventListener("error", function(e) { 
    if (e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img") { 
     // Bad image src 
     // e.target.src = "Do an url replacement"; 
    } 
}, true);

источник

2015-10-22 08:33:11 LGSon

Предотвращение загрузки изображений из сценария

ответ

Смежные вопросы