Ng-lazyload-image: 延迟加载和 srcset

你好，

不幸的是，这个库不支持 srcset，但它应该支持它。 这是一个非常重要的功能。

话虽如此，支持它并不容易，因为我们需要以与浏览器相同的方式解析和理解 srcset。

选项1：

我们将 srcset 视为一种特殊情况，不会尝试在后台加载图像，而是在图像是视口时设置srcset ：
假设我们有以下 html 标签：
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
当图像在视口中时，我们查看srcset并检测到lazyLoad包含srcset -string 并将标签转换为：
<img srcset="small.jpg 300w, large.jpg 500w">

亲：
简单的实现
骗局：
用户永远不会看到“defaultImage”。
我们永远无法在加载图像时处理网络错误。

选项 2：

我们解析srcset并选择最佳选项（就像我们认为浏览器应该做的那样）。
假设我们有以下 html 标签：
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
我们检测到lazyLoad包含一个srcset并且我们将字符串解析为如下内容：
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
我们将其与浏览器宽度（和设备像素比）进行比较并选择最佳图像。 在后台加载图像，加载时我们只需设置srcset并且由于图像在缓存中，它将立即加载。

亲：
图片将被延迟加载 🎉
用户将看到默认图像。
我们可以处理网络错误（我们应该尝试从srcset加载一些其他图像还是应该只加载错误图像？）。
骗局：
以浏览器应有的方式解析字符串总是很棘手； 我们可能会错过一些边缘用例。
根据我的理解，如果它存储在缓存中，浏览器将始终使用最大的图像。 由于我们无法知道图像是否已经加载，因此我们必须加载最适合的图像（但在我们设置srcset后将显示最大的图像）。 例如，假设我们有以下 srcset small.jpg 300w, large.jpg 500w并且屏幕小于 500 px 但large.jpg已经加载。 根据我的理解，浏览器应该设置large.jpg因为它在缓存中但是因为我们不知道我们将加载small.jpg并且当它加载时我们将设置srcset并且浏览器会选择large.jpg （但是我可能是错的）。 即我们不必要地加载了图像。

结论：

我认为选项 2 是可行的（应该不会太难），我认为我们应该这样做。 然而，我现在的时间非常有限，但我很高兴接受 PR :)

您好@tjoskar ，感谢您的快速回复，我同意您的看法，第二个选项可能可行。 我现在也没有太多时间，因为我在一些最后期限内，但是一旦我有更多时间，我想为此功能做出贡献，特别是考虑到我已经扩展了库的行为以支持懒惰加载带有 hlink.href 属性的图像标签:)

或者忽略默认的浏览器 srcset 选项并将其作为您自己的决策过程来实现，并随着时间的推移对其进行调整以使其尽可能好:)

规格

你只需要遵守规范，我相信规范非常简单。

但是正如您指出的那样，浏览器实现可能会破坏您在这里想要实现的目标，因此我认为应该绕过它。

我已经提交了一个拉取请求 (#231)，它将响应式图像支持添加到\ 我正在等待任何输入。

这包含在3.4.0 。 谢谢@sapierens