具有响应式图像（未知高度）的懒惰加载

Question

我正在使用一个基于百分比的CSS网格系统。我有一个网格，有4列，每列占页面总宽度的25%。我在每个“25%单元格”内输出图像标签，如下所示：

<img src="foo.jpg" style="max-width:100%" />

当浏览器调整大小时，图像也会调整大小以填充每个25%单元格的100%。浏览器会选择一个高度，就像我放了“height:auto”（省略时是隐式的）。

现在，我想给它添加延迟加载功能。问题是，在加载图像之前，它们在页面上的高度未知。浏览器必须下载图像

目前我有一个概念证明，在输出img标记之前，我计算服务器上的图像纵横比，并在数据属性中输出：

<img src="foo.jpg" style="max-width:100%" data-aspect="1.7742" />

然后，在事件“document ready”（文档准备就绪）时，我循环浏览每个图像，并在延迟加载之前设置一个固定的“高度”值（以像素为单位）：

$('img').each(function() {
        var img = $(this);
        var width = img.width();
        var ratio = img.data('aspectratio');
        var height = width / ratio;
        $(this).css('height', height+'px');
    });

这似乎是工作，从某种意义上说，它不再加载所有的图像在同一时间，但只加载图像，因为我滚动。

然而，它似乎可能会导致新的问题，比如随着用户调整浏览器的大小，图像会被拉伸。当延迟加载完成后引发回调时，我必须将“height”切换回“auto”。这将照顾到用户看到的图像-但折叠下面的图像在调整浏览器大小时仍然具有不正确的“高度”值。每次调整浏览器的大小时，我都必须迭代以前在折叠下面的所有图像，测量它们的更新宽度，读取它们的纵横比，并更新新高度，然后重新触发延迟加载以处理现在在折叠上面的任何图像。如果我不这样做，加载可能会触发太早或太迟，因为这些图像具有错误的高度值。

我的问题是，除了我在这里描述的确切方法之外，还有其他方法可以延迟加载高度未知的图像吗？这会产生什么后果？我的方法有什么缺点吗，除了编程很痛苦之外？

Answer 1

更清洁：

1. 将图像的高度和宽度设置为任意大的数字（如2000px 1000px）

这一方法的成功归功于Github用户DryUpper，在本期Github中给出

Answer 2

下面是评论中更优雅的解决方案。它仍然需要在服务器端编写纵横比，但需要使用包装器div：

<div class="lazy"><img src="foo.jpg" style="max-width:100%" data-aspect="0.75" /></div>

然后用JS给包装器divapadding bottom：

$('div.lazy').livequery(function() {
    var c = $(this);
    var r = c.data('ar');
    c.css('padding-bottom', r * 100 + '%');
});

这为div提供了img最终将消耗的确切尺寸。然后，我在填充消耗的区域内使用以下LESS加载图像：

div.lazy {
  max-width:100%;
  position:relative;
  img {
    position:absolute;
    width:100%;
    height:100%;
  }
}

Answer 3

我最近遇到了一个类似的问题，在一个响应性布局中结合了同位素和惰性负载。当页面加载时，同位素根据图像的宽度和高度确定布局，因此最初，由于同位素没有计算正确的大小，项目都是重叠的。

为了确保占位符项目节省空间，我使用了您提到的填充底部技巧：http://thisisthat.co.uk/notebook/2013-10-07-lazy-loading-responsive-images （虽然可能不是那么准确的帖子。）以下是我的标记：

    <article class="portfolio-item">
        <a class="portfolio-link" href="img/gallery/thumb90.jpg" style="padding-bottom: 66.2%">
            <div class="portfolio-image-wrapper">
                <img class="portfolio-image" data-original="img/gallery/thumb90.jpg" width="1000" height="662">
            </div>
            <div class="portfolio-text">
                <h1 class="portfolio-item-name">
                    <span href="#" class="icon" data-icon="e"></span>
                    <span class="portfolio-item-tags">Bridals</span>
                </h1>
            </div>
        </a>
    </article>

这可能比你需要的更复杂（因为整个。投资组合文本div是一个覆盖层，有相当多的样式在进行）。真正的关键是根据图像的宽度和高度计算底部填充（我在PHP模板中这样做了），并将其设置为我想要节省空间的项目的填充底部。