Question

我有以下jQuery当前在产品准备就绪时运行，但它正在做的是调整元素的高度，但看起来很丑，因为它在页面加载后改变高度所以我的问题是：是否可以加载代码并在显示之前设置高度？

$(document).ready(function () {
    // set hero height to max viewport
    var heroHeight = $(window).height();
    var smsHeight = $('#send-text').height();
    $('#oasis-hero').css('min-height', heroHeight - smsHeight - 140 + 'px');

    // hide video
    $('#hero-video').hide();

    // click function to auto play video
    $('.hero-text .primaryCta').on('click touchend', function (e) {
        $("#hero-video")[0].src += "&autoplay=1";
        $('#hero-video').show();
        $('#hero-video-bg').hide();
        $('.hero-text').hide();

        $(this).unbind("click");
    });
});

Answer 1

绝对可能。您只需要在相关的html元素定义之后放置代码。您只需要避免引用尚未创建的元素。

例如，此代码完全可以在文档就绪事件

之外工作

<div id="myDiv"></div>
<script>
    $('#myDiv').hide(); // <-- will hide 'myDiv' since the element is already created
</script>

虽然这段代码无能为力

<script>
    $('#myDiv').hide(); // <-- won't hide 'myDiv' since the element is not created yet
</script>
<div id="myDiv"></div>

Answer 2

我认为这里的问题是窗口的高度，一旦整个DOM被加载，它将被准确计算。

var heroHeight = $(window).height();

我喜欢这样的想法：你首先要隐藏要调整其高度的元素，然后使用说明 fadein 最终显示动画。

在页面加载之前触发jQuery代码，是否可能？

2 个答案: