jQuery无法正确调整窗口大小

Question

I managed to make the margins grow smaller and body's width stick the same when resizing the window's browser. 调整窗口浏览器的大小时，我设法使边距变小，并且主体的宽度保持不变。 The problem is '#content' still flashes for a second. 问题是“ #content”仍然闪烁一秒钟。

If you test the code below you'll see what I mean. 如果您测试下面的代码，您将明白我的意思。 It's hard to express its behavior. 很难表达其行为。 Does anybody know how to fix that? 有人知道该如何解决吗？ Does it have anything to do with callback functions and the order of events. 它与回调函数和事件的顺序有关吗？ Thank you. 谢谢。

Here is the code: 这是代码：

<html>
    <head>          
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     
        <style>
            html, body{
                padding: 0;         
                margin: 0, auto;                
            }           
            body{
                position:absolute;
                margin: 0px;
                padding: 0px;
            }
            #content{
                background-color: green;
            }
            #mainContent{
                background-color: orange; 
            }
            aside{
                background-color: blue;
            }
            .floatLeft{
                float:left;
            }
            .clear{
                clear:both;
            }
        </style>
    </head>
    <body>      
        <section id="content" class="border">
            <section id="mainContent" class="floatLeft" >   
                mainContent
            </section>                      
            <!-- End of main content -->

            <aside class="floatLeft">                               
                aside                   
            </aside>
            <!-- End of aside -->

            <p class="clear"></p>

        </section>
        <!-- End of content -->

        <script type="text/javascript">
            $(document).ready(function(){               
                change_template();
            });

            change_template = function(){       
                var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w, left_right2, last_width;       
                left_right = 180;

                aux = left_right;

                top = screen.height - (screen.height - 100);            
                left_right = left_right - (screen.width -  $(window).width())/2;


                resize_body(top, left_right, left_right);

                    last_width = $(window).width();

                    $( window ).resize(
                    function(){

                        if($(window).width() > last_width){

                            left_right = left_right + ($(window).width() - last_width)/2;                           

                        }else if($(window).width() < last_width){

                            left_right = left_right - (last_width -  $(window).width())/2;

                        }

                        resize_body(top, left_right, left_right);

                            last_width = $(window).width();                         

                    });                                                 

                content_w = screen.width - 2*aux;                   

                mcontent_w = content_w - 300;
                $('#mainContent').css('width', mcontent_w);

                aside_w = content_w - mcontent_w;
                $('aside').css('width', aside_w);                               

            }

            resize_body = function(top, left, right){

                $('body').css('top', top+'px');
                $('body').css('left', left+'px');
                $('body').css('right', right+'px');             
            }
        </script>               
    </body>
</html>

Answer 1

The reason it flashes is because the browser only sends "resize" events to JavaScript so many times per second (variable depending on the browser you use) and your browser can only execute the code so fast (variable depending on browser and how powerful your computer is). 闪烁的原因是，浏览器每秒仅向JavaScript发送“调整大小”事件如此多次（取决于您使用的浏览器），而浏览器只能如此快地执行代码（取决于浏览器和计算机的性能如何）是）。 Pretty much what you are doing is executing your resize function tens of times per second and the code can't run fast enough to keep up with how fast your are resizing the window. 您正在执行的操作几乎是每秒执行数十次调整大小功能，并且代码运行速度不足以跟上调整窗口大小的速度。 Also, when you finally stop moving the window and the final resize event is triggered, it takes time to run through the code - it doesn't just complete instantaneous, all code takes some time to run. 另外，当您最终停止移动窗口并触发最终的resize事件时，需要花费一些时间来运行代码-它不仅完成即时，而且所有代码都需要一些时间才能运行。

If you don't want to notice the flashing, use media queries. 如果您不想注意到闪烁，请使用媒体查询。

jQuery无法正确调整窗口大小

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-01-11 22:27:49

jQuery无法正确调整窗口大小

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-01-11 22:27:49

解决方案1
1 已采纳 2013-01-11 22:27:49