자바 스크립트를 jquery로 변환하십시오.

Question

이 스크립트를 사용하여 화면 너비에 따라 작거나 큰 이미지를로드합니다.

<script> 
var jt_width = screen.width; 
//var jt_height = screen.height; 
if (jt_width < 361) {document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>')}; 
</script> 

단점은 사람이 세로에서 가로로 갈 때 휴대 전화에이 즉시 변경되지 않는다는 것입니다, 나는이 일을 jQuery를 사용하고 싶습니다.

나는 window.outerWidth 또는 .width()를 사용하는 것과 같은 가능성에 대해 온라인에서 읽었으며 브라우저 호환성 측면에서 볼 때 .width()가 가장 좋은 해결책이라는 것을 알고있었습니다.

위의 스크립트를 jquery 버전으로 변환하고 싶습니다. 그러나 자바 스크립트에 대해 거의 알지 못하기 때문에이 작업을 수행하는 방법을 모르겠습니다. 이것이 내가 가진 것입니다.

function load(){ 
    w.value = $(window).width(); 
    h.value = $(window).height(); 
} 

jquery를 사용하여 동일한 출력을 얻으려면 어떻게해야합니까?

Answer 1

새 스크립트는 스크립트의 응답 속도에 도움이되지 않습니다.

<script> 
var jt_width = screen.width; 
function doAThing() { 
    if (jt_width < 361) { 
    document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>') 
    }; 
} 

doAThing(); 
window.addEventListener('resize', doAThing); 
</script> 

편집 : 당신은 리스너를 추가 할 필요가 나는 방향으로 잘 동작 '크기 조정'확신 해요,하지만 당신이 그것을 테스트하고 잘 작동하지 않는 경우 당신은 또한에 orientationchange 리스너를 추가 할 수 있습니다 뿐만 아니라 기능 :

$(window).resize(function () { 
    var width = $(window).width(); 
    var height=$(window).height(); 
    /**on resize you can change your content or code based on your condition*/ 
}); 
/*This event will be triggered when the window size will change */ 

Answer 2

이 구현 사용 JQuery와 인 창에서 크기를 조정할 때 브라우저에서 작동합니까? `onresize` 이벤트 리스너가 있습니까?