javascript - 如何在页面加载前调整布局

Question

我有一个 jquery 代码，它根据主 div 的宽度调整文本和图像的大小，该主 div 扩展了 100% 的浏览器窗口。出于某种原因，当我将代码放入 (document).ready 函数时，它不会启动。它在 (window).resize 中完美运行，但每当页面首次加载时，它看起来很糟糕。只要您将 Web 浏览器变小或变大，一切都会立即就位。我怎样才能在页面加载时让所有内容都卡入到位？

$(document).ready(function() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    var headerheight = $('.header-middle').height();

    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});

    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});
});

更新

$(document).ready(function(){
    resizeDiv();
});

window.onresize = function(event) {
    resizeDiv();
}

function resizeDiv() {
    var mainwidth = $('.main').width();
    var mainheight = $('.main').height(mainwidth * .8895);
    var headerwidth = $('.header-middle').width();
    $('.main').height(mainwidth * .8895)
    $('.logo').width(headerwidth * .049);
    $('.logo').height(headerheight * .7533);
    $('.divider').width(headerwidth * .00204);
    $('.design-image').width(headerwidth * .2547);

    $('.call-us-today').css({'font-size': headerwidth * .01836});
    $('.header-paragraph').css({'font-size': headerwidth * .01734});
    $('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
    $('.top-text').css({'font-size': headerwidth * .02448});
    $('.graybar-text').css({'font-size': headerwidth * .03265});
    $('.body-header').css({'font-size': headerwidth * .02245});
    $('.body-text').css({'font-size': headerwidth * .01632});
    $('.footer').css({'font-size': headerwidth * .01224});
    $('.banner-text').css({'font-size': headerwidth * .02244});

    $('.graybar-text').css({'letter-spacing': headerwidth * .00408});
}

Answer 1

$(document).ready() 在所有资源(如图像)完成下载之前触发。试试这个:

$(window).load(function() {
// image manipulation code

});