如何防止图像缩略图的流体网格在加载期间移动？

Question

我正在使用 bootstrap 3 流体网格来显示缩略图，并且我喜欢在调整浏览器大小时图像大小的缩放方式。然而，不利的一面是在加载每个页面时都会产生“大爆炸”效果。也就是说，网格开始折叠，然后随着图像的添加而增长。我想一个简单的解决方法是硬编码图像大小，但这会失去我相信的缩放优势。

解决此问题的一种尝试是在每个缩略图之前加载一个透明的占位符图像，这当然会在结果的第一页上兑现，从而更快地扩展网格。在缩略图加载事件的回调中，我删除了占位符。这似乎有帮助，但其他时候我仍然看到这种转变和以前一样糟糕。此外，在连接速度较慢的情况下，您实际上可以暂时看到占位符下方的真实拇指。

<script type="text/javascript">
    $(function(){
        // For each thumbnail, insert a placeholder image.
        // Once the thumb is loaded, remove the placeholder.
        $("[id^=thumb-]").each(function(i, thumb) {
            var $thumb = $(thumb)
            var imgTag = "<img id='ph-" + (i + 1) +
                "' class='placeholder' src='{% static "img/placeholder.png" %}'/>";
            $thumb.parent().prepend(imgTag);
            var $holder = $thumb.prev();
            function loaded() {
                $holder.remove();
            }
            if (thumb.complete) {
                loaded();
            } else {
                $thumb.on('load', loaded);
                $thumb.on('error', function() {
                    console.log('Error with thumbnail placeholders.');
                });
            }
        });
    });
</script>

关于兼容性，我希望至少有一个可以使用旧版浏览器的网站，但它不一定是完美的。

我对修复上面的 Javascript 解决方案没有兴趣，因为我是整体上最好的解决方案。

请查看实时 beta 站点 here 以帮助诊断。 我尝试了一个 jsfiddle，但无法完全重现它。一旦我们了解了问题所在，我将在问题中粘贴更多上下文。

Answer 1

在这种情况下，我建议将 <img> 标签添加到纯 HTML。然后在你的javascript函数中设置src。

您还需要在<img> 标记上设置高度和宽度属性，以便保留它们的空间，以防止在加载图像后重绘页面。您可以使用一个简单的 javascript 函数来执行此操作，该函数确定 window.width，然后设置高度和宽度属性。

类似this。