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

随着浏览器调整大小,图像也会调整大小,以填充每个25％单元格的100％.浏览器选择一个高度,好像我把“height：auto”(当省略时是隐式的).

现在我想为此添加延迟加载功能.问题是在图像加载之前,它们在页面上的高度是未知的.浏览器必须下载图像&观察其长宽比,并计算其高度.在此之前,所有图像的高度为1px.由于每个图像的高度为1px,因此它们都被视为“在视口内”,并被立即加载.

目前我有一个概念证明,在输出img标签之前,我计算服务器上的图像宽高比,并输出一个数据属性：

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

然后,在事件“文档就绪”之后,我循环遍历每个图像,并在懒惰加载之前设置固定的“height”值(以像素为单位)：

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

这似乎在工作,因为它不再同时加载所有的图像,但只有在滚动时加载图像.

然而,似乎它可能会导致新的问题,如图像变得伸长,因为用户调整浏览器的大小.当延迟加载已完成的回调触发时,我必须将“高度”切换回“自动”.这将照顾用户看到的图像 – 但是在浏览器调整大小时,折叠下方的图像仍然会具有不正确的“高度”值.每次浏览器调整大小时,我都必须迭代先前位于该位置的所有图像,测量其更新的宽度,读取其宽高比并更新新的高度,然后重新触发延迟加载来处理现在高于折.如果我不这样做,由于这些图像具有错误的高度值,加载可能太早或太迟.

我的问题是,除了我在这里描述的确切方法之外,还有其他方法来懒惰加载未知高度的图像,这有什么后果？我的方法有什么缺点,除了它是一个痛苦的程序？