конвертировать javascript в jquery .width

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-версию, но так как я почти ничего не знаю о javascript, я не знаю, как это сделать. Это то, что у меня есть

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> 

EDIT: Я уверен, что «размер» отлично работает для ориентации, но если вы проверить его, и это не работает хорошо, вы можете также добавить orientationchange прослушивателя на функция, а также:

window.addEventListener('orientationchange', doAThing);

Answer 2

Это реализация с помощью JQuery:

$(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 */