javascript – 在调整窗口大小之前,在准备好时应用CSS无法正确呈现

2023年9月20日 130次阅读

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

每次调整浏览器大小时都必须执行Size(),这样可以平衡一些CSS.

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

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

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();
});

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

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

最佳答案 我在这里已经确定问题在于使用height(),当我实际上在这里使用innerHeight()时,因为我也在同一行中应用了填充.

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

更新：我最近已经意识到了imagesloaded.js,这使得窗口加载时间缩短了一些时间,也消除了由于图像渲染而导致页面元素跳跃的机会.

点赞