拥有SSR Web应用程序时如何处理图像延迟加载？

问题描述

因此，我现在阅读了大量有关延迟加载图像的文章和Google文档，并找到了以下解决方案：

• 在受支持的loading="lazy"标签中使用较新的<img />
• 返回到不存在的交叉口观察器

到目前为止，还不错，但是当我交付带有服务器端渲染的Web应用程序（在我的情况下是启用了ANgular Universal的Angular 8应用程序）时，我无法验证我的客户端在渲染时使用哪个浏览器，呈现应用程序时，然后延迟加载将不起作用。

我正在使用Natanel的这种出色方法：Link

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总是虚假的。

解决方法

图像仍将作为单独的http调用下载，因此服务器上的逻辑将无法正常运行。实际做什么取决于您如何处理“不受支持”的情况。

情况1：您只想让图像保持非惰性。如果是这样-在服务器环境中使用此逻辑时，只需添加属性。对于较新的浏览器-这些图像会很懒。对于较旧的浏览器-您的图片将像简单的图片一样加载，与指令逻辑相同。

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