我不知道埃米尔的回答是否正确。如果我理解，菲律宾人想要一个页面大小停止更改的代码，Emiel的答案只适用于在更改的瞬间识别当前媒体查询，那么它将不适用于Fiipeur想要的代码。
我有这个代码：
(function () {
var curImgId = 1;
var numberOfImages = 4;
window.setInterval(function() {
if (matchMedia('(min-width: 1250px)').matches) {
$('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}
else{
$('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}
}, 7 * 1000);
$(window).resize(function() {
if (matchMedia('(min-width: 1250px)').matches) {
$('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}
else{
$('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}
});
})();
我试着做动画背景，但我遇到了一个问题。调整窗口大小时，图像变化很快。如何修复它。如果你改进了这个代码，我也会很感激。
使用matchMedia可以监听change事件。每当媒体查询中的matches状态发生变化时，就会触发此事件。
在下面的示例中，每当屏幕发生变化时，该事件就会触发，min-width: 1250px将匹配或停止匹配。
const mediaQuery = matchMedia('(min-width: 1250px)');
mediaQuery.addEventListener('change', ({ matches }) => {
if (matches) {
$('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
} else {
$('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
curImgId = (curImgId + 1) % numberOfImages;
}
});
这允许您省略resize事件，因为您不再需要在每次宽度更改时进行检查。每当发生相关更改时，媒体查询都会通知您。
window.addEventListener('resize', function () {
var initialWindowWidth = window.innerWidth;
setTimeout(function () {
if (initialWindowWidth == window.innerWidth) {
functionYouWannaRun();
}
}, 100);
})
function functionYouWannaRun() {
console.log('Resizing is stopped');
}
这可能会对你有所帮助。基本上，代码会检查最后一个宽度调整大小，并在100ms后再次检查，如果第二个大小不同，则表明窗口仍在调整大小。如果有人调整大小太慢，只需增加时间间隔值
如果我做得不对，埃米尔可能是正确的答案。