如何在没有浏览器重排的情况下延迟加载未知维度的HTML图像

时间:2016-04-21 12:30:08

标签: html angularjs image lazy-loading

在我的Angular应用程序中,我需要显示具有不同未知尺寸的未知数量的图像。

我使用专用指令(angular-lazy-img; ng-lazy-image)延迟加载图像,并且在图像进入视口时延迟加载真实图像之前使用默认的src图像。 / p>

当图像进入视口时,我通常会有一个非常明显的回流,因为真实图像的尺寸和纵横比不同于默认值。

我认为也许有一种方法可以在不实际下载的情况下获得真实的图像尺寸,但似乎没有明显的方法可以做到这一点......

同一问题的另一个可见症状是,当我更改为其他视图然后返回第一个视图时,先前在第一个视图中加载的所有图像现在都返回到默认图像,而我的垂直位置在页面中关闭。

我在想,也许一个(非常糟糕的)解决方案是跟踪滚动位置,累积加载的图像偏移量并执行滚动操作以隐藏回流,但也无法找到任何信息。

非常感谢任何建议/澄清。

0 个答案:

没有答案