如何解决拥有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
。在这种情况下,只需在服务器上运行时跳过此伪指令中的逻辑即可。它将在客户端上处理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。