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