[译]Medium 是如何优化图片加载的

Medium 是全球非常知名的阅读平台,允许用户多人协作,并将自己的内容发布到平台上,让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章,有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧: 其实我们可以看到在在那些文章中的图片,我们可以看到起初是一张非常小的并且模糊的图片,随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求,就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ,然后将他的padding-bottom设置成百分比,从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图( 详情 »