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可能是一种更好的方法，因为图像请求将按需进行（如果触发了click事件），如果用户没有单击它，则保存一个不必要的请求。

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

另一种方法是在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);
});

关于性能jQuery的问题

1 个答案: