如何通过js或jquery将图像的“ src”标记修改为data-src以便启用延迟加载图像

Question

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

我无法将html代码更改为data-src，因为我们共享组件，而此更改仅在一页上进行。

所以我的问题是，一旦我查看页面源代码，我想查看data-src而不只是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中，因此我认为这不适用于延迟加载。您应该考虑使用服务器端语言来更改该页面，恕我直言，除非在after这样的脚本中加载了库。