时间戳

首页 > 解决方案 > 当你有一个 SSR Web 应用程序时如何处理图像延迟加载？

angular - 当你有一个 SSR Web 应用程序时如何处理图像延迟加载？

问题描述

所以，我现在阅读了一堆关于延迟加载图像的文章和谷歌文档，并找到了这个解决方案：

到目前为止一切都很好，但是当我交付具有服务器端渲染的 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 在服务器中总是假的。

标签： angularimageseoserver-side-rendering

解决方案

图像仍将作为单独的 http 调用下载，因此服务器上的逻辑不会像您预期的那样工作。做什么实际上取决于您如何处理“不受支持”的情况。

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

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

推荐阅读