使用 querySelectorAll 为图像源添加前缀

Question

我正在尝试使用 weserv.nl 图像代理服务通过他们的云服务器加载图像，并且不要加载原始 img src 图像。现在重写所有图像的 src 已经太晚了，我也不想为此使用 jQuery，因为我的目的是让网站更快，而不是加载更慢。所以我想要的是 img src 不加载原始图像，而是向 src 添加前缀并加载结果。 Fiddle 例子是 here。困难的部分是图像没有 id 或 class 分配。

var items = document.querySelectorAll("div.separator img");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src = img.src.replace(/.*?:\/\//g, "");
    img.src='https://images.weserv.nl?url='+img.src+'&w=120';
}

Answer 1

由于图像没有类或附加 ID，您仍然可以参考父标签并获取所有要替换的图像。

同样在您的代码中，您将 src 属性设置了两次。这不是必需的。当您替换 // 时，只需将其存储到一个变量中，稍后将其设置为 img.src

根据您的 fiddle，您有两个 div，所以我使用 div img 作为选择器来更改 src

var items = document.querySelectorAll("div img");
for (var i = items.length; i--;) {
    var img = items[i],
        src = img.src.replace(/.*?:\/\//g, "");
    img.src='https://images.weserv.nl?url='+src+'&w=120';
}

DEMO

使用 querySelectorAll 为图像源添加前缀

Use querySelectorAll to add a prefix to image source

javascript

selectors-api