在我的所有图像中添加一个对 src 上瘾的 data-src，以改进 WordPress 环境中的延迟加载功能答案

【问题标题】：Add a data-src in addiction to src to all of my images to improve a lazy load function in a WordPress environment在我的所有图像中添加一个对 src 上瘾的 data-src，以改进 WordPress 环境中的延迟加载功能
【发布时间】：2019-04-12 02:19:34
【问题描述】：

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

我正在使用一个名为 unlock.js 的框架，但问题是它需要在每个图像的 src 中添加一个 data-src。

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

类似的东西：

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

这对我来说是一个进步，但我想在我的网站上实现这个脚本。我尝试了几个插件，但它们没有做我想要的，因为基本上我的问题是我所有的图像都位于 wordpress 上的主题文件夹（或插件文件夹）之外，所以我不可能打电话他们以这种方式。谢谢

【问题讨论】：

当您将 src 属性更改为 data-src 时，您的部分或全部图像可能已经被加载，这完全没有理由首先实现延迟加载。这绝对是服务器端的任务！
你可能是对的..
他可以通过 javascript 来做到这一点并加载它渲染阻塞，所以页面在加载 JS 之前不会加载？
你的意思是onload？
WordPress 网站头部的 JavaScript 被称为渲染阻塞，因此它在页面其余部分之前加载

标签： javascript wordpress lazy-loading

【解决方案1】：

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

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

确保您在头部加载脚本以使其呈现阻塞，这样您的页面在脚本加载之前不会加载。

【讨论】：