我一直想知道facebook如何快速加载图像 . 我不参与任何与我的问题有关的项目，但我真的很感兴趣 .
通过一些观察，我注意到facebook会将低质量图片作为临时图片加载，并在完全加载后立即显示高质量图片 . 这使它看起来像是如此快速地加载它，但实际上它起初只是一个低质量的 .
我的问题是，Facebook如何实现这一点？当我将图像放在我的网站上时，它会从上到下以完整的质量加载它 .
这是通过Javascript / Jquery ajax完成的吗？或者其他的东西？是通过PHP完成的？
facebook在他们的版本上做了什么？低质量和高品质？先送低质量的？
谢谢 ：）
2 回答
是!你是对的，Facbook首先加载低质量的图像然后根据网络速度渲染它 . 这种称为“渐进式JPEG”的方法是另一种类型的JPEG，正如其名称所示，它们逐渐呈现 .
首先，您会看到整个图像的低质量版本 . 然后，随着越来越多的图像信息通过网络到达，质量逐渐提高 .
从可用性的角度来看，渐进式通常是好的，因为用户得到了正在发生的事情的反馈 . 此外，如果您的连接速度较慢，渐进式JPEG更可取，因为您无需等待整个图像到达，以便了解它是否符合您的要求 . 如果没有，您可以单击远离页面或点击后退按钮，而无需等待（可能很大）高质量图像 .
博客和书籍中存在有争议的信息，即在文件大小方面，渐进式JPEG是否大于或小于基线JPEG .
如果您使用Photoshop或任何设计工具等工具同时以jpg或其他格式保存任何文档，它将询问您2选项一用于Baseline而另一个是Progressive .
但是，如果您已经为此编写了任何API，您可以在运行时实现相同的功能，以便在网页上显示时将基线图像转换为渐进式图像 .
根据我的理解，当您从Facebook UI点击图像时，查看器会显示加载的缩略图版本较低（或缩略图的略大版本） . 由于浏览器缓存，低质量图像将非常快速地显示 .
然后在后台，他们使用javascript来加载更高质量的图像 . 然后使用一些javascript事件，他们可以检测何时加载了更高质量的图像 . 加载后，将质量较低的版本替换为较低质量版本 .
所以从UI的角度来看，它只是Javascript . 上传照片时，它们会创建多种尺寸的图像以允许此效果发生 .