我计算出我的命令需要 90ms 来更改图像 src。
$('#tab3 #' + arrsong[i].songid + ' .sogSelect button#select-'+arrsong[i].songid+' img').attr('src', 'images/icon_add_active.png');
仅更改一两个图像,您不会看到延迟,但当我在使用许多命令的循环中执行此操作时,会花费很多时间。
有什么办法可以做得更好吗?
最佳答案
首先,向您的图像添加类名称。你不应该每次访问已知对象时都计算这么长的 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 选择器。这不太好。
关于jQuery 更改图像 src 属性太慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30837273/