javascript - 如何使用js或jquery修改图像的 "src"标签到data-src以启用延迟加载图像

Question

为了使用大多数延迟加载库，我们需要使用“data-src”而不仅仅是“src” 我如何修改 html 和“src”为 data-src 以便能够使用延迟加载。

我无法将 html 代码更改为 data-src，因为我们共享组件并且仅在一个页面上更改内容。

所以我的问题是，一旦我查看页面源代码，我想查看 data-src 而不仅仅是 src

当我使用这行代码时，我能够编辑 DOM 并查看 View 页面源代码中的更改

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

它基本上编辑了从coveragee到coverage的链接。 当我查看页面源代码时，我可以看到链接是覆盖范围而不是覆盖范围，

我想要同样的东西，但是对于 src 到 data-src

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 中，所以我猜这不适用于延迟加载。恕我直言，您应该考虑使用服务器端语言来更改该页面，除非在类似的脚本之后加载库。