javascript - 只有在 css 显示 :block - issue with resize 时才执行 javascript

Question

我在一个有两个横幅的网站上工作——一个用于移动设备，一个用于桌面。为了让两个横幅都能正常工作，我必须编写一个 if 语句，仅当桌面横幅设置为 display:block 在 css 中时，才会执行 dsktop javascript 的过去。 这工作正常，但唯一的问题是当用户调整窗口大小时 if 语句不会执行 - 他们必须重新加载页面才能执行此操作。

这是代码:

var wait = setInterval(function () {
 if (!$(currentBanner, loading).is(":animated")) {
  clearInterval(wait);
  loading.stop().fadeOut(300, function () {
 if ($('#banner').css('display') == 'block'){
  setTimeout(function() {
  bannerInit();
  }, 800);
  startInterval();
 if (initialLoad) {
  initialLoad = false;
  next.slideDown();
  previous.slideDown();
 }
 }
});
}

有人知道我如何不仅在页面加载时而且在调整窗口大小时触发 if 语句吗？

Answer 1

像这样:

// on document ready
$( document ).ready(function() {
  /* your function/code here */
});

// on page load, all elements finished e.g images etc
$(window).load(function() {
 /* your function/code here */
});

// on page resize
$(window).on('resize', function(){ 
 /* your function/code here */
};

或者普通 JS:

// page load
window.onload = function() {
  /* your function/code here */
};

// resize    
window.addEventListener("resize", myFunctionOnResize);