jQuery Изменение изображения src атрибут слишком медленный

Question

Я вычислил свою команду, что для изменения изображения src требуется 90 мс.

$('#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 s, не сделайте это один за другим. Используйте классы.

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

Во всяком случае, как я предполагаю, что проблема в том, что вы вычислить DOM селектор 5 элементов каждый раз в цикле. Это не хорошо.

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 вы уверены, что именно этот селектор работает медленно? попробуйте также профилировать другие части кода.