在页面加载或每次调整大小时发生事件的好方法是什么?
What is a good way to make an event occur when the page has loaded OR on each resize?
每次文档准备就绪或调整视口大小时,我都需要一个查询来检查视口宽度。原因是我希望主导航对于不同的视口宽度具有不同的外观和行为。
//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 表达式的好方法是什么?
正如 Terry 在他的评论中指出的那样,您可以创建一个函数并在您需要它的每个场景中重用它。
I.E.
function checkWidth() {
let windowWidth = $(window).width();
let maxWidth = 1000;
if(windowWidth < maxWidth) {
// do your stuff
}
}
$(document).ready(function() {
checkWidth();
});
$(window).on('resize', function() {
checkWidth();
});
另一种解决方案是在 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,以确保它在页面加载时执行。
每次文档准备就绪或调整视口大小时,我都需要一个查询来检查视口宽度。原因是我希望主导航对于不同的视口宽度具有不同的外观和行为。
//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 表达式的好方法是什么?
正如 Terry 在他的评论中指出的那样,您可以创建一个函数并在您需要它的每个场景中重用它。
I.E.
function checkWidth() {
let windowWidth = $(window).width();
let maxWidth = 1000;
if(windowWidth < maxWidth) {
// do your stuff
}
}
$(document).ready(function() {
checkWidth();
});
$(window).on('resize', function() {
checkWidth();
});
另一种解决方案是在 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,以确保它在页面加载时执行。