jQuery 更改图像 src 属性太慢

Question

我计算出我的命令需要 90ms 来更改图像 src。

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

仅更改一两个图像，您不会看到延迟，但当我在使用许多命令的循环中执行此操作时，会花费很多时间。

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

Answer 1

首先，向您的图像添加类名称。你不应该每次访问已知对象时都计算这么长的 DOM 选择器。
如果您需要存储一些值，请使用 data 属性。

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

现在，您可以使用以下查询访问它:

$(".sogSelectImage[data-songId='" + arrsong[i].songid + "']").attr("src", "2.png");

它绝对应该运行得更快。

如果你在循环中执行它，你甚至可以这样做:

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

或以这种方式使用 for 循环(这在生产力方面更差):

var images = $(".sogSelectImage");

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

此外，如果您将相同图像更改为所有img，不要一张一张地这样做。使用类。

// 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");

无论如何，正如我猜测的，问题是你每次在循环中计算 5 个元素的 DOM 选择器。这不太好。