我正在研究延迟加载图像的缺点，我必须非常彻底，因为我们正在考虑在站点中的许多/大多数图像上实现loading="lazy"。的原因是我相信我有一个应该有效的策略。
我们使用浏览器本机loading="lazy"属性，因为我们最近放弃了对IE的支持。哇，我知道。
在整个网站上，我们将折叠上方的所有图像设置为热切，将下方的所有图像都设置为懒惰。
然后，我们将侦听页面加载事件并运行一个脚本，该脚本将每个带有loading="lazy"的图像转换为loading="eager"(或auto)。因此，折叠下面的图像也会被加载，在大多数情况下，可能是在用户滚动时(至少使用现代互联网连接速度)。页面load事件在所有热切加载的图像完成后触发，但可能/应该在延迟加载的图像开始之前触发，因此这是我们触发折叠下方加载的机会。
一个已知的缺点是，延迟加载的图像可能会在用户滚动时导致布局偏移，因为浏览器在图像开始加载之前不知道尺寸。另一个缺点是用户可能对滚动到图像时未加载的图像感到恼火。该解决方案通过在加载优先图像后立即将剩余的延迟加载图像转换为eager来解决这两个问题，以减少用户遇到这些问题的机会。
还有一种可能性是，在某些特定情况下，JavaScript片段正在等待加载图像，以便对其进行处理，这有时会阻碍渲染。让我们把这当作一个次要问题。我认为我们不太可能在这个网站上遇到这种情况，我们会在发生这种情况的地方进行修复。
顺便说一句，我还设计了一个脚本，可以观察外部脚本在DOM上填充或操作的元素，并将任何新添加的img元素转换为loading="lazy"(如果它发生在页面加载之前)，因此我能够保证页面上所有img元素的延迟加载，它确实会使Lighthouse加载性能提高几点。
到目前为止，我还没有发现太多严重和/或可能的问题，懒惰加载页面上的每一个或大多数图像，因为它是用我设计的策略处理的。
我的问题是我错过了什么。这一战略是否存在差距？
我还需要考虑哪些其他因素？因为我不希望我的决定在我工作的网站上引起问题。
当互联网连接非常快时，加载也很快，用户甚至可能看不到图像加载前的状态。然而，情况并不总是那么乐观，可能有太多人在使用互联网，并占用了他们观看视频、听音乐、与朋友聊天的所有带宽。
时，您的问题开始出现
- 用户使用的设备太多
- 加载页面期间出现网络中断
- 图像不可用或加载速度慢(可能是非常慢的第三方UI)
通常，如果您的设计运行良好，并以用户友好的方式处理这些情况，那么用户当然会注意到出现了等待/中断，但可能不会将其链接到您的网站。然而，如果你的设计在这些阶段看起来很难看，那么用户会记得互联网中断/速度慢，以及你的页面有多难看。
由于这是每个开发人员都想避免的事情，因此将互联网视为一种通常有效但总是有减速或缓慢的可能性的东西是有道理的。
因此，如果您知道哪些图片将显示在视口中，以及只有当用户滚动时才会显示哪些图片，那么您就可以急切地加载用户将首先看到的图片。当然，要知道视口中会显示哪些图片并不总是那么容易，尤其是当您的页面在不同设备上看起来非常不同时。然而，您可以将内容分为两个主要部分：
- 即使在页面加载期间也显示的部分
- 只有当页面加载完成时才会显示的部分
您可以完全隐藏第二部分，这样就不会出现视觉问题。
处理这一问题的另一种方法是提前(在服务器端)知道图片的尺寸，在图片加载时隐藏图片标签，并在图片将出现的地方显示一些占位符(例如，一些"加载"gif)，并对以这种方式隐藏的所有图像具有加载事件；加载"；占位符将消失，实际图像将在加载图像时显示。这将确保布局的视觉结构完全相同，同时它还没有显示所有图像，就像所有图像都已完全成功加载一样。
如果您从未使用过浏览器本机延迟加载，您可能不知道的是，它不一定会提高较短页面上的初始加载大小/时间，因为它仍然会启动加载任何比3000像素更接近视口的内容，甚至在触发windowload事件之前。这就是过于急切的原因。
有关此问题的信息：https://calendar.perfplanet.com/2019/native-image-lazy-loading-in-chrome-is-way-too-eager
这可能会使它与谷歌Lighthouse针对较短页面的性能指标相比毫无用处。
因此，我们正在实现老式的非本地延迟加载，在这里我们可以通过JavaScript进行完全控制。我们提供的图像如下：
<img data-src="some-image.src" />
<noscript>
<img src="some-image.src" />
</noscript>
除了将Image.dataset.src交换到Image.src属性的常见技术之外，使用类似于此处原始问题中描述的JavaScript策略，或者我们经常使用lazySize。
但我对浏览器原生懒惰加载的功能一无所知。特别是，为什么浏览器不会优先考虑折叠上方的惰性图像而不是折叠下方的惰性图像，并且在折叠上方加载所有内容之前不加载折叠下方的任何惰性图像或激发load事件。
我不明白为什么不能用CSS设置懒惰加载。如果我们可以单独通过CSS选择器将loading属性应用于页面的部分，那将是一件很棒的事情。相反，我们被迫使用JavaScript或在服务器上处理它。有了CSS，它将像loading: lazy;一样简单。
我将调查这些想法是否在任何地方提出。我也可能发布我们最终使用的代码。