许我们使用渐进式 JPEG、Ajax 和 HTTP 范围请求在延迟加载期间加载预览图像,而无需传输额外的数据。 低质量图像预览 (LQIP)和基于 SVG 的变体 SQIP是延迟图像加载的两种主要技术。两者的共同点是您首先生成低质量的预览图像。这将显示模糊,然后由原始图像替换。如果您可以向网站访问者呈现预览图像而无需加载其他数据,该怎么办? JPEG 文件主要使用延迟加载,根据规范,可以以先显示粗略图像内容,然后显示详细图像内容的方式存储其中包含的数据。与在加载过程中从上到下构建图像(基线模式)不同,可以非常快速地显示模糊图像,并逐渐变得越来越清晰(渐进模式)。
基线模式下 JPEG 时间结构的表示 基线模式(大预览) 渐进模式下 JPEG 时间结 美国手机号码列表 构的表示 渐进模式(大预览) 除了更快显示的外观提供更好的用户体验之外,渐进式 JPEG 通常也比基线编码的对应文件小。根据雅虎开发团队的 Stoyan Stefanov 的说法,对于大于 10 kB 的文件,使用渐进模式时有94% 的可能性会出现较小的图像。 如果您的网站包含许多 JPEG,您会注意到,即使是渐进式 JPEG,也会一个接一个地加载。这是因为现代浏览器只允许六个同时连接到一个域。因此,单独使用渐进式 JPEG 并不是为用户提供最快的页面印象的解决方案。在最坏的情况下,浏览器将在开始加载下一张图像之前完全加载图像。

这里提出的想法是现在只从服务器加载渐进式 JPEG 的字节数,以便您可以快速获得图像内容的印象。稍后,在我们定义的时间(例如,当当前视口中的所有预览图像都已加载时),应该加载图像的其余部分,而无需再次请求已请求预览的部分。 显示 EIP(嵌入式图像预览)技术如何在两个请求中加载图像数据。 使用两个请求加载渐进式 JPEG(大预览) 不幸的是,您无法告诉img属性中的标记应在何时加载多少图像。然而,使用 Ajax,这是可能的,只要提供图像的服务器支持HTTP Range Requests。 使用 HTTP 范围请求,客户端可以在 HTTP 请求标头中通知服务器所请求文件的哪些字节将包含在 HTTP 响应中。每个较大的服务器(Apache、IIS、nginx)都支持此功能,主要用于视频播放。如果用户跳到视频的末尾,那么在用户最终看到所需部分之前加载完整视频的效率不会很高。