关于性能 jQuery 的问题

Question

我对性能有疑问？

用html写两张图片，一张隐藏一张显示，用jQuery改变两者的显示（隐藏显示的一张，显示隐藏的一张）会更好吗？

<img id="1" style="display:none;" src="img1.png" />
<img id="2" src="img2.png" />
$('#1').onclick(function (){
  $(this).css('display', 'none');
  $("#2").css('display', 'inline-block');
});
$('#2').onclick(function (){
  $(this).css('display', 'none');
  $("#1").css('display', 'inline-block');
});

还是改图片的src更好？

$('#1').onclick(function (){
  if ($(this).attr('src') == 'img1.png')
    $(this).attr('src', 'img2.png');
  else
    $(this).attr('src', 'img1.png');
});

非常感谢！

Answer 1

替换 src 可能是一种更好的方法，因为如果用户没有点击图片请求（如果点击事件被触发），那么您将保存一个 不必要的 请求。

但是，如果需要通过点击多次更改图像，这可能是很多不必要的请求。

另一种方法是在 DOM 中创建 2 个图像并根据点击进行交换

var $img1 = $('<img>', {
    src: 'img1.png'
});
var $img2 = $('<img>', {
    src: 'img2.png'
});


$('#1').click(function (){
  if ($(this).attr('src') == 'img1.png')
    $(this).html($img2);
  else
    $(this).html($img1);
});