jQuery更改图像src属性太慢

我计算我的命令，它需要90毫秒来改变图像src

$('#tab3 #' + arrsong[i].songid + ' .sogSelect button#select-'+arrsong[i].songid+' img').attr('src', 'images/icon_add_active.png');

只更改一个或两个映像，您看不到延迟，但当我使用许多命令在循环中执行此操作时，会花费大量时间

还有什么方法可以做得更好吗？

首先，在图像中添加一个类名。您不应该每次都计算这么长的DOM选择器来访问已知对象。
如果需要存储某些值，请使用

数据
属性

<img class="sogSelectImage" src="1.png" data-songId="1" />

它肯定会工作得更快

如果在循环中执行，甚至可以通过以下方式执行：

$(".sogSelectImage").each(function() {
   var songId = $(this).data('songId');
   $(this).attr("src", "something_else.png");
});

或者以这种方式使用
for
循环（这在生产率方面更差）：

无论如何，正如我猜想的那样，问题是在循环中每次计算5个元素的DOM选择器。这不好。
尝试缩小jQuery选择器。jQuery在从右到左的选择器搜索中工作，这就是为什么它必须循环太多。当您使用按钮的
ID
属性时，您可以通过按钮的
ID
进行选择，这样会更快

$("#select-"+arrsong[i].songid).find("img").attr('src', 'images/icon_add_active.png');

注意：您的
ID
在页面中必须是唯一的。

P.S.2你确定这个选择器确实工作缓慢吗？尝试分析代码的其他部分。
它比6-7倍快。我还计算了选择器。需要17毫秒。“我觉得没关系。”Slim_user71169我的建议有帮助吗？没有。问题不在于选择器。我已经测试了我的选择器和你的选择器。看到答案了吗。无论如何，谢谢你
var images = $(".sogSelectImage");

for (int i = 0; i < arrsong.length; i++)
{
    images.find("[data-songId='" + arrsong[i].songId + "']").attr('src', '2.png');
}

// CSS
.sogSelectImage {
   background-image: url('1.png');
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}

.sogSelectImage.sogSelectImage-add {
   background-image: url('./images/icon_add_active.png');
}

// JS
$(".sogSelectImage").addClass("sogSelectImage-add");

$("#select-"+arrsong[i].songid).find("img").attr('src', 'images/icon_add_active.png');