我在我的网站中使用了以下代码:
$(window).resize(function (event) {
window.location.reload();
});
很遗憾,使用移动设备访问该网站时会发生微小的大小重置事件。我想增加一个公差,以使这些微小变化不会触发重新加载。为此,我需要知道重置事件中发生的尺寸变化。我一直在研究event
对象,但它太庞大且难以理解。
提前感谢您的帮助 :)
我在我的网站中使用了以下代码:
$(window).resize(function (event) {
window.location.reload();
});
很遗憾,使用移动设备访问该网站时会发生微小的大小重置事件。我想增加一个公差,以使这些微小变化不会触发重新加载。为此,我需要知道重置事件中发生的尺寸变化。我一直在研究event
对象,但它太庞大且难以理解。
提前感谢您的帮助 :)
您可以通过跟踪原始窗口尺寸,然后将这些尺寸与当前尺寸(在每个调整大小事件期间获取)进行比较,以确定更改量。
以下是如何在宽度发生一定总量THRESHOLD
的情况下触发重新加载:
var THRESHOLD = 50; // the threshold that must be exceeded to trigger reload
$(window).resize(function(e) {
var width = $(window).width();
// Record the starting window width that the comparison will
// be relative to
if(window.startWidth == undefined) {
window.startWidth = width;
}
// Calculate the total change since first resize event
var widthChange = Math.abs(width - window.startWidth);
// If change exceeds THRESHOLD, trigger reload
if(widthChange > THRESHOLD) {
window.location.reload();
}
})
var width = $(window).width();
这一行代码获取的是新的宽度,所以你在将新的宽度与新的宽度进行比较。我需要想办法获取旧的宽度。 - Wormwindow.startWidth
只被存储一次,然后被重复使用作为参考宽度来检测阈值?或者我在这里漏掉了什么? - Dacre Denny在JBDouble05的有益评论和Dacre Denny的有益答案的基础上,我制定了一个最终解决方案,以满足我的需求。希望这里能帮助未来的他人。
var OGwidth = $(window).width();
var OGheight = $(window).height();
var threshold = 50;
$(window).resize(function (e) {
if (OGwidth < 768) {
var newWidth = $(window).width();
var newHeight = $(window).height();
var widthChange = Math.abs(OGwidth - newWidth);
var heightChange = Math.abs(OGheight - newHeight);
if (widthChange > threshold || widthChange > threshold) {
window.location.reload();
}
} else {
window.location.reload();
}
//reset for next resize
OGwidth = newWidth;
OGheight = newHeight;
})