有关性能jQuery的问题

Question

I had a question about performance ?

Is it better to have the two images written in html, one hidden and one displayed, and with jQuery change the display of both (to hide the one displayed, and show the hided one) ?

<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');
});

or is it better to change the src of the image ?

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

Thank you very much!

Answer 1

Replacing the src is probably a better approach since the image request will be made on demand (if the click event was triggered) if the user does not click it, then you save one unnecessary request.

However, if the image needs to be changed multiple times with clicks this can be a lot of unnecessary requests.

An alternative would be is to create 2 images in the DOM and swap based on the click

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);
});