Конвертировать 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

Это реализация, использующая 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 */

Answer 2

Ваш новый сценарий не поможет реагированию сценария. Вам нужно добавить слушателя:

<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.addEventListener('orientationchange', doAThing);