Question

我有两个JavaScript函数。一个名为Init()的函数，用于检查页面上呈现的信息，在$(document).ready()上触发，在此函数结束时，它在完成检查所有内容后调用一个名为Size()的函数

每次调整浏览器大小时都必须执行

Size()，这样才能平衡掉一些CSS。

出于某种原因，Size()在Init()期间无法正常工作，并且在调整浏览器窗口大小之前，它实际上并没有做到应该做的事情。

这些功能是否正确使用？ Size()在init上缺少什么吗？

var h = $(window).height(), 
    w = $(window).width(),
    m = 30; // global margin

var fitTop, fitBot;

function fitInit() {
    fitTop = $(".fit-compare-top").length;
    fitBot = $(".fit-compare-bottom").length;

    fitSize();
}

function fitSize() {
    if (w < 1024) {
        $(".fit-compare-item").width(w*0.7);
        if (w > 767) {
            mm = 220;
        }
        else { mm = m }
        $(".fit-compare-tops").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitTop + mm);
        $(".fit-compare-bottoms").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitBot + mm);
    }
    else {

        // this where I'm having the problem
        // the height of the follow object remains
        // unchanged until $(window).resize()

        $('.fit-hero-text').height(h-h/5).css({
            "padding-top": h*0.3
        });
        $(".pillars-section").height( (Math.min(1280,w)*0.4)*1.5 );

    }
}

$(document).ready(function() {
    fitInit();
});
$(window).resize(function() {
    fitSize();
});

我尝试从Size()移除Init()并将其放入$(document).ready()，但效果相同。我显然要求在加载页面后发生此功能，因为我不能依赖用户来调整浏览器的大小。

更新：如果我从padding-top删除了$('.fit-hero-text') CSS规则，则调整大小时没有跳转，并且计算并正确渲染高度。为什么会这样？

Answer 1

我在这里已经确定问题在于使用height()，当我在这里实际使用innerHeight()时，因为我也在同一行中应用了填充。

jQuery's height()最初应用元素的高度并忽略填充，因为height()不包含填充。 jQuery's innerHeight()包括填充，可以接受在同一行中应用的CSS。

更新：我最近发现了imagesloaded.js，这使得窗口加载时间缩短了一些时间，也消除了页面元素因图像跳转的机会渲染。

在调整窗口大小之前，在准备好时应用CSS无法正常呈现

1 个答案: