Question

我有点麻烦，所以让我来描述一下我的情况：

我有一个有两个主要区域的网站。带有导航链接的A和显示内容的位置。

我正在使用ajax，以便当我点击链接时会发生以下步骤：

1）#main fadea out中的内容

2）加载新内容

3）#main的高度改变了

4）显示新内容。

但由于某些页面的某些原因，#main的高度无法正确调整。它会太短，削减内容。我注意到这只是第一次发生，你加载页面，这让我觉得它是一个问题，浏览器无法正确计算高度，直到所有数据下载。但我不明白为什么会发生这种情况，因为回调函数不应该开始，直到所有内容都被加载，对吧？

无论如何，继承人的代码。我希望你们能帮我一臂之力。谢谢！


    $("a:not('.noajax')").live("click", function(e){
        e.preventDefault();

        //Load new page
        var link = $(this).attr("href");
        loadpage( link );
    });

    function loadpage(href) {

        //Keep fixed the main container
        var old_height = $(".outermain").innerHeight();
        $("#main").css({"height":(old_height)});

        //Fade out the interior
        $(".outermain").fadeOut(100, function(){
            //Prepare interior to calculate new height
            $(".outermain").css({"display": "block", "visibility": "hidden"});

            //Load new page
            $(".outermain").load(href + " .innermain", function(){

                var new_height = $(".outermain").innerHeight();
                var rolloutspeed = 700 - (new_height / 30);

                rolloutspeed = 600;

                $("#main").animate({"height":new_height}, rolloutspeed , "easeOutBack", function(){
                    $(".outermain").css({"visibility": "visible", "display":"none"}).fadeIn(function(){
                        $("body").removeClass("ajaxblocked");
                    });
                });
            });
        });
    }

这是HTML：

<section id="main">
    <div class="outermain">
        <div class="innermain clearfix">

            ...

        </div>
    </div>
</section>

Answer 1

如果请求的html引用了图像，那么在计算新尺寸之前不会下载它们，如果我没弄错的话。

Ajax在容器中加载。高度问题？

1 个答案: