javascript - 为我的所有图片添加一个与src无关的data-src，以改善WordPress环境中的延迟加载功能

Question

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

我正在使用一个名为unveve.js 的框架，但问题是它需要将 data-src 添加到每个图像的 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);
});

确保在头部加载脚本以使其渲染阻塞，以便在加载脚本之前不会加载页面。