I was wondering about the best way to improve performance?
Would it be more efficient to have two images written in HTML, one visible and one hidden, and then use jQuery to toggle their display (hiding the visible one and showing the hidden 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');
});
Alternatively, would it be better to simply change the src attribute 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 for your help!