윈도우 변경 후 이미지 변경 Jquery로

Question

Jquery 코드에 문제가 있습니다. 나는 창 너비에 따라 페이지의 이미지를 변경하고 싶습니다 ...

아래의 코드는 거의 내가 원하지만 실수가 하나 있습니다 - 하나 이상의 이미지 앞에 ... 더 많은 클론을 만듭니다 내가 크기를 재조정 한 후에.

난 당신이 내게 줄 수있는 도움에 대한 감사 드리겠습니다 ..

여기, 내 코드

(function ($) { 
    var $window = $(window), 
     $img2 = $('#img2'); 
    $img4 = $('#img4'); 

    function resize() { 
     if ($window.width() < 750) { 
      $img2.remove() 
      $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg" width="100%"/>') 
     } else if ($window.width() > 750) { 
      $img4.remove() 
      $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg" width="100%"/>') 
     } 
    } 

    $window.resize(resize) 
     .trigger('resize'); 
})(jQuery); 

Answer 1

이미지가 같은 장소에, 당신은 실제로 단지 그들을 대체 할 경우입니다

var $window = $(window), 
    $img = $('#img'); 

function resize() { 
    if ($window.width() < 750) { 
     $img.attr('src', 'img/illu4.jpg'); 
    } 
    else if ($window.width() > 750) { 
     $img.attr('src', 'img/illu2.jpg'); 
    } 
} 

필요에 따라 또 다른 더 나은 옵션/숨기기를 보여주는 것입니다 : 당신은 단지 소스를 한 장의 사진을 변경할 수 있습니다

var $window = $(window), 
    $img2 = $('#img2'); 
    $img4 = $('#img4'); 

function resize() { 
    if ($window.width() < 750) { 
     $img2.hide() 
     $img4.show() 
    } else if ($window.width() > 750) { 
     $img2.show() 
     $img4.hide() 
    } 
} 

Answer 2

당신은 내부의 $img2 & $img4 선택기를 크기 조정 이벤트 기능을 을 둘 필요가 : 당신이 그들을 제거 할 때, 당신의 참조는 깨진 이후 제거합니다에 DOM에 새로운 이미지를 떠나되고있다

jQuery(function ($) { 
    var $window = $(window); 

    function resize() { 
     var $img2 = $('#img2'); 
     var $img4 = $('#img4'); 
     if ($window.width() < 750) { 
      $img2.remove() 
      $('.illu').prepend('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg" width="100%"/>') 
     } else if ($window.width() > 750) { 
      $img4.remove() 
      $('.illu').prepend('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg" width="100%"/>') 
     } 
    } 

    $window.resize(resize) 
     .trigger('resize'); 
}); 

.

참고 : 또한 IIFE 구문 (function($){YOUR CODE HERE})(jQuery);을보다 안전한 DOM 준비 단축키 형식 (jQuery(function($){YOUR CODE HERE});)으로 전환했습니다. Banana에서 알 수 있듯이

, 당신은 생성 및 삭제,하지만 이미지를 재사용/표시/숨기기하지 오프 아마도 더 나은,하지만 이것은 단지 코드 :

Answer 3

function resize() { 
    if ($window.width() < 750) { 
     $img2.remove() 
     $img4 = $('<img id="img4" class="illu-img4 pulse_image" src="img/illu4.jpg" width="100%"/>').prependTo('.illu'); 
    } else if ($window.width() > 750) { 
     $img4.remove() 
     $img2 = $('<img id="img2" class="illu-img2 pulse_image" src="img/illu2.jpg" width="100%"/>').prependTo('.illu'); 
    } 
} 

당신이 할 수와 실제 문제에 대답하는 것이 었습니다 이런 식으로 해보십시오. 본문 크기를 조정하는 동안 참조가 손실됩니다.