为我所有的图片添加一个data-src in addiction to src 以改进WordPress环境下的懒加载功能

Question

我的问题是我想在我的网站上实现一个延迟加载系统。

我正在使用一个名为 unveil.js 的框架，但问题是它需要将数据源添加到每个图像的 src。

所以基本上，我需要向每个图像添加 src 属性的副本（例如 src="image1.jpg"）并将其包装在 data-src 中。

类似的东西：

$('img').each(function() {
    var datasrc = this.attr("src");
    //somthing else to add the data-src
});

这对我来说是个进步，但我想在我的网站上实施这个脚本。我尝试了几个插件，但它们没有做我正在寻找的事情，因为本质上我的问题是我的所有图像都位于 wordpress 的主题文件夹（或插件文件夹）之外，所以我无法调用他们以这种方式。谢谢

Answer 1

您可以使用 Javascript/jQuery 执行以下操作：

$('img').each(function() {
    var datasrc = $(this).attr("src");
    $(this).attr("datasrc", datasrc);
});

确保您在 head 中加载脚本以使其呈现阻塞，以便您的页面在脚本加载之前不会加载。