html - Questions about performance jQuery -

html - Questions about performance jQuery -

i had question performance ?

is improve have 2 images written in html, 1 hidden , 1 displayed, , jquery alter display of both (to hide 1 displayed, , show 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 improve alter src of image ?

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

thank much!

replacing src improve approach since image request made on demand (if click event triggered) if user not click it, save 1 unnecessary request.

however, if image needs changed multiple times clicks can lot of unnecessary requests.

an alternative create 2 images in dom , swap based on 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); });

jquery html css image performance