1

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

4

1 回答 1

0

有人所说的一种解决方案是设置min-height：

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

然而，这个问题是它仍然可能会反弹，只是从 140 像素到图像的大小，这也意味着你必须高于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，则此解决方案可能不合适。

于 2013-06-20T08:35:18.917 回答