浅谈Web前端针对图片显示的优化方案

我在Medium浏览帖子的时候发现他们的图片加载效果真的很赞诶。首先载入一个低像素的模糊图片，然后逐渐转变为高清大图。这个过程体验真的很好，所以我希望能够明白他们是使用什么方法做到的。

Medium的技术

我使用WebPageTest测试这个页面的载入过程。如果你希望能够测试同样效果，可以打开Medium的页面，禁用cache减慢图片申请加载的过程，所以加载出原图的时间会稍久。这样就可以清楚看到整个图片的加载效果。

具体执行过程

使用div限定好图片展示的区域，Medium使用<div>标签并加入padding-bottom样式设定对应图片的展示尺寸。通过这样占位的方式可以防止在图片加载后出现整体页面回流的情况。这种方法通常被称为intrinsic placeholders

加载小尺寸(像素低)的图片，此时网页会先请求一个像素质量较低的小号缩略图（大小为原图的20%）.这个小图片使用<img />标签,因此浏览器会在标签加载完成后，立即请求图片资源。

只要图片加载完成，它就会被“画”到<canvas />中。图片数据会被main-base.bundle.js文件中自定义的Blur()函数重新计算，可以看到它会产生模糊图片的效果。尽管有些不同，不过该函数与StackBlur的模糊函数实现效果是相似的。在模糊图片生成的同时，浏览器也会开始请求高清原图资源。

最后原图被加载到页面上，canvas会被隐藏，只展示原图。

最后的最后，感谢CSS的动画功能，上述所有转变过程会很流畅。

Markup

整个展示图片的结构

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表