Question

<div><img src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" alt="demo image" style="height: 180; width: 150;"></div>

原始图像的src为https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg

要更改的字符为s1600

我正在使用的jQuery

$('div img').each(function(n, i){
    var p = $(i);
    var w = $(this).width().toFixed();
    var h = $(this).height().toFixed();
    return p.attr('data-src' , p.attr('data-src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c'));
});

裁剪后的src是https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/w150-h180-c/Growing-Food-Plant.jpg

更改的字符为w150-h180-c

现有的jQuery版本运行良好。但是无法处理更多图像并且速度很慢。我试图将jQuery脚本转换为纯JavaScript，但无法正常工作。

var divImage = document.querySelectorAll("div img");
for(var c = 0; c < divImage.length; c++) {
    var wid = divImage[c].clientWidth.toFixed();
    var hei = divImage[c].clientHeight.toFixed();
    var attr = divImage[c].getAttribute("src");
    for(var a = 0; a < attr.length; a++) {
        attr[a].replace(/s\B\d{2,4}/,'w' + wid + '-h' + hei +'-c');
    }
}

有没有人可以告诉我我的脚本出了什么问题？

提前谢谢。

Answer 1

我的脚本出了什么问题

您的代码不起作用，因为

您生成新的网址

attr[a].replace(...

但不要更新图片上的属性

divImage[c].setAttribute("data-src", attr[a].replace(...

您正在使用

divImage[c].getAttribute("src")

原件使用.attr("data-src")

您使用的.getAttribute()返回一个字符串，然后循环遍历每个字母

for(var a = 0; a < attr.length; a++)

给予：

var divImage = document.querySelectorAll("div img");
for (var c = 0; c < divImage.length; c++) {
  var wid = divImage[c].clientWidth.toFixed() || 0;
  var hei = divImage[c].clientHeight.toFixed() || 0;
  var attr = divImage[c].getAttribute("data-src");
  var newattr = attr.replace(/s\B\d{2,4}/, 'w' + wid + '-h' + hei + '-c');
  divImage[c].setAttribute("data-src", newattr);
}

$("div img").each(function() {
  console.log($(this).attr("data-src"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><img data-src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" /></div>
<div><img data-src="https://1.bp.blogspot.com/-Cte2EwC-9PE/UsbynhiHbtI/AAAAAAAAHRE/jmGB7-eTfoY/s1600/Growing-Food-Plant.jpg" /></div>

如何通过纯JavaScript自动调整博客图像的大小？

1 个答案: