Каков хороший способ вызвать событие, когда страница загружена ИЛИ при каждом изменении размера? - PullRequest
Новая
       38

Каков хороший способ вызвать событие, когда страница загружена ИЛИ при каждом изменении размера?

0 голосов
/ 25 мая 2019

Мне нужен запрос для проверки ширины области просмотра каждый раз, когда документ готов или когда размер области просмотра изменяется.Причина в том, что я хочу, чтобы основная навигация выглядела и велась по-разному для разных размеров области просмотра. 

//EventListener to get viewport width on load
window.addEventListener("load", function () {
    window.loaded = true;
});

//get Window Size on Resize
var width = $(window).width();
$(window).on('resize', function reportWindowSize() {
  if ($(this).width() != width) {
    width = $(this).width();
    console.log(width);
  }
});

Тогда я думаю, что мне нужен запрос, подобный этому: 

If (page loaded OR viewport width changes) {
   if (viewport width > x) {
     do things

} else if (viewport width < x) {
     do other things
  }
};

Что быхороший способ превратить If (page loaded OR viewport width changes) в выражение JavaScript или jQuery?

1 Ответ

0 голосов
/ 25 мая 2019

Как отметил Терри в своем комментарии, вы можете создать функцию и повторно использовать ее в каждом из необходимых вам сценариев.

И.Е. 

function checkWidth() {
  let windowWidth = $(window).width();
  let maxWidth = 1000;
  if(windowWidth < maxWidth) {
    // do your stuff
  }
}

$(document).ready(function() {
  checkWidth();
});

$(window).on('resize', function() {
  checkWidth();
});

Другим решением было бы использование Media Queries внутри JS.

Вы можете наблюдать за медиа-запросом, как в CSS, с помощью следующего кода: 

if (matchMedia) {
  let mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(checkWidth);
  checkWidth(mq);
}

// media query change
function checkWidth(mq) {
  if (mq.matches) {
  // do your stuff
  }
}

Вам необходимо вызвать checkWidth после добавления прослушивателя событий, чтобы убедиться, что он выполняется при загрузке страницы.

Я получил этот пример от: https://www.sitepoint.com/javascript-media-queries/

...