时间戳

首页 > 解决方案 > 我正在使用 JavaScript 操作图像的高度，但是，首先图像以原始大小加载，然后应用 JavaScript

javascript - 我正在使用 JavaScript 操作图像的高度，但是，首先图像以原始大小加载，然后应用 JavaScript

问题描述

下面的代码采用导航的高度（50px，这对以后很重要），然后视口的高度将图像的最大高度设置为视口高度减去导航高度。

我这样做是为了使图像始终完全可见，无论它有多高。不幸的是，这有一个小缺点。

每当我刷新页面时，有一瞬间我可以在应用 JavaScript 高度之前看到图像。在使用 Photoshop 比较高度差异后，我意识到差异正好是 50px，即导航的高度。这清楚地表明，图像在 JavaScript 启动之前的一瞬间使用了 CSS 规则。

现在我的问题是 - 我可以做到这一点，以便在将 JavaScript 操作应用于图像之前不显示图像？

CSS

.specific-image {
    display: block;
    max-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

JavaScript

function fitImage() {
        var navHeight = $("nav.navigation").outerHeight();
        var viewport = $(window).height();
        $(".specific-image").first().css({"max-height":viewport-navHeight});
}

标签： javascriptjquery

解决方案

推荐阅读