使用querySelectorAll为图像源添加前缀

Use querySelectorAll to add a prefix to image source

本文关键字：添加 加前缀 图像 querySelectorAll 使用      更新时间：2023-09-26

我正在尝试使用weserv.nl图像代理服务来使用它们的云服务器加载图像，而不加载原始的img src图像。现在为所有图像重写src已经太晚了，我也不想为此使用jQuery，因为我的目的是让网站加载更快，而不是更慢。因此，我希望img src不加载原始图像，而是在src中添加前缀并加载结果。Fiddle的例子就在这里。困难的部分是，这些图像没有分配id或类。

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';
}

由于图像没有附加类或Id，因此您仍然可以引用父标记并获取所有要替换的图像。

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

根据你的小提琴，你有两个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

相关文章：