javascript - jquery 窗口加载函数在加载时不执行任何操作

Question

第一次在这里发帖，只是想知道在我为包含菜单元素的外部 html 文件编写的这个小 jquery 脚本中我做错了什么。它适用于调整大小，但不加载。我尝试过独立的 $(window).load();事件也是如此，似乎没有任何作用。我是 jQuery 新手，只知道该做什么和不该做什么!

jQuery(document).ready(function($) {
  var vwidth = $(window).width();
  var vheight = $(window).height();
  var menu = $('#menu_container');

  $( window ).on('load resize', function() {
    if (vwidth >= 1000) {
      menu.css('zoom', '1');
    } else {
      menu.css('zoom', '0.8');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

这里有两个问题。 @Mr. 已经解释过了。多旋风。 另一个事实是 DOM 就绪事件将在 window.load 之后执行。事件。这意味着到时候jQuery(document).ready执行$(window).load已经发生了，所以注册window.load的事件有点晚了。试试这个...

//this is essentially the same as jQuery(document).ready
$(function(){
    toggleZoom();

    $(window).on("resize", function(){
        toggleZoom();
    });
});



function toggleZoom(){    
  var vwidth = $(window).width();
  //this isn't needed in this snippet
  //var vheight = $(window).height();
  var menu = $('#menu_container');


    if (vwidth >= 1000) {
      menu.css('zoom', '1');
    } else {
      menu.css('zoom', '0.8');
    }
}