성능에 대한 질문 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

사용자가 클릭하지 않으면 이미지 요청이 요청에 따라 이루어 지므로 불필요한 요청을 저장하므로 더 나은 접근 방법입니다.

그러나 이미지를 클릭하여 여러 번 변경해야하는 경우 많은 수의 이 필요합니다. 개의 요청이 있습니다.

대안이 될 것이다는

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