Question

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

$('#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选择器。这不好。

Answer 2

尝试缩小jQuery选择器。 jQuery在从右到左的选择器搜索中工作，这就是为什么它必须循环太多。当您使用ID属性作为按钮时，您可以通过其ID进行选择，它会更快。

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

P.S。您ID在页面中必须是唯一的 P.S.2你确定这个选择器工作得很慢吗？尝试分析代码的其他部分。

jQuery Change Image src属性太慢了

2 个答案: