Question

我最近开始向我的图片添加max-width:100%和height:auto，以便浏览器可以缩小它们以适应屏幕（如有必要）。我发现的唯一缺点是，在图像加载之前，图像将在页面上加载的每个“占位符”空间似乎都有height为零。这会导致页面元素在页面加载后但在加载所有图像之前跳转。鉴于height:auto如何运作，这是有道理的，但我想知道是否有人提出了一个创造性的解决方案来阻止它。

Answer 1

有人提出的一个解决方案是设置min-height：

.placeholder {
    height: auto;
    min-height: 140px;
    width: 100%;
}

然而，问题在于它仍然可能会反弹，只是从140px到图像的大小，这也意味着你所有的图像必须比任何min-height更高。你设置了。

不幸的是，由于您的问题是在页面加载时，您可以使用JavaScript来动态加载图像并适当设置其占位符的高度。

你可以做的一件事是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head stuff ... -->
</head>
<body>
    <div id="staggerer" style="display: none;">
        <!-- Put page content inside this ... -->
    </div>

    <script type="text/javascript">

        window.onload = function() {
            document.getElementById('staggerer').style.display = "block";
        };

        // Or in jQuery:

        $(window).load( function() {
            $('#staggerer').css('display', 'block');
        });

    </script>
</body>
</html>

这将等到所有已加载之后才显示页面内容。如果您的页面需要很长时间才能加载，那么此解决方案可能不合适，当然也依赖于JavaScript。

CSS高度：自动起始值？

1 个答案: