Как изменить тег "sr c" изображения на data-sr c с js или jquery, чтобы включить отложенную загрузку изображений

Question

Чтобы использовать большинство ленивых загрузочных библиотек, нам нужно использовать «data-sr c» вместо просто «sr c». Как я могу изменить html и «sr c», чтобы они были данными -sr c чтобы можно было использовать ленивую загрузку.

Я не могу изменить код html на data-sr c, потому что мы совместно используем компоненты и что это изменяет только на одной странице.

Итак, мой вопрос: как только я просматриваю исходный код страницы, я хочу увидеть данные * sr c вместо просто sr c

Я смог отредактировать DOM и увидеть мои изменения в источнике просмотра страницы, когда я использовал эту строку кода

$("a[href='/comprehensive-insurance-and-collision-coveragee']").prop('href', '/comprehensive-insurance-and-collision-coverage')

, она в основном отредактировала ссылку от покрытия до покрытия. и когда я просмотрел исходный код страницы, я вижу ссылку как покрытие, а не покрытие,

я хочу то же самое, что и для sr c, для data-sr c

Answer 1

Вы не можете, поскольку JavaScript вносит изменения в DOM: есть несколько способов изменить атрибут с src на data-src, но вы не увидите его прямо в источниках. Вы можете видеть его, только просматривая страницу с помощью инструментов разработчика браузеров. Для автоматического изменения на стороне сервера необходимы такие языки, как PHP.

В jQuery:

var source = $(element).attr("src");
$(element).attr("data-src", source).removeAttr("src");

В ванили JavaScript:

var element = document.getElementById("id");
var source = element.getAttribute("src");
element.setAttribute("data-src", source);
element.removeAttribute("src");

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

Answer 2

Если вы не хотите изменять атрибут sr c, так как он используется в разных контекстах, вы можете вместо этого добавить атрибут loading = lazy для отложенной загрузки изображений (и iframes, если необходимо). Кроме того, для поддержки старых браузеров, вы можете использовать полифилл, который я разработал для этого аспекта: https://github.com/mfranzke/loading-attribute-polyfill