jquery - 关于性能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);
});