查看详情
[译]Medium 是如何优化图片加载的
Medium 是全球非常知名的阅读平台，允许用户多人协作，并将自己的内容发布到平台上，让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章，有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧： 其实我们可以看到在在那些文章中的图片，我们可以看到起初是一张非常小的并且模糊的图片，随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求，就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ，然后将他的padding-bottom设置成百分比，从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图(eg:20%)，实际上这是直接在代码中写了 img标签的，浏览器会正常请求； 一旦图片加载了，它们会开始绘制一个canvas标签，图片的数据会传递给自定义的blur函数，这个函数与StackBlur有点相似，但不完全，这个同时，网络开始请求大图。 大图加载完毕后，于是区域便展示大图，而canvas则会隐藏掉。 我们会使用transition从而让整个效果变得更加流畅。 基本结构 基本的html结构如下： <figure> <div> <div/> <!-- this 详情 »