当你有一个SSR网络应用程序时，如何处理图像延迟加载

Question

因此，我阅读了许多关于当今以正确方式延迟加载图像的文章和谷歌文档，并找到了这个解决方案：

• 在支持的<img />标记中使用较新的loading="lazy"
• 回退到交叉点观察器

到目前为止还不错，但当我交付带有服务器端渲染的web应用程序(在我的情况下是启用了Angular Universal的Angular 8应用程序(时，我无法验证我的客户端在渲染时使用的浏览器，只是当应用程序被渲染时，延迟加载不起作用。

我正在使用Natanel的这个伟大的方法：链接

import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: 'img' })
export class LazyImgDirective {
constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
const supports = 'loading' in HTMLImageElement.prototype;
if (supports) {
nativeElement.setAttribute('loading', 'lazy');
}
}
}

问题是这个if在服务器中总是错误的。

Answer 1

图像仍将作为单独的http调用下载，因此服务器上的逻辑不会像您预期的那样工作。该做什么真正取决于你如何处理"；不支持"；案例

情况1：您只想将图像保留为非懒惰。如果是这样，只需在服务器环境中使用此逻辑时添加属性即可。对于较新的浏览器，这些图像将是懒惰的。对于较旧的浏览器，您的图像将被加载为简单的图像，就像您的指令逻辑一样。

情况2：您希望回退到IntersectionObserver。在这种情况下，在服务器上运行时只需跳过此指令中的逻辑。它将在客户端上处理。