360.jpg 1200w

 

1200.jpg 9999w

 

这时浏览器把 360 的图当成了 1200 来用了。这里可能有些疑问，图像的宽度为什么不是90vw 了哪?因为浏览器被骗了但是自己却不知道，他依然按照 1200 的图像，去适配 dpr。414 * 90% *(360 / 1200)约等于 111.7。这种方式很智能，浏览器根据你的 sizes，从 w 列表中选择最合适的图像来调用显示。

 

如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像，可以使用 picture 元素。

 

当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。视口小于768，则加载默认图像。虽然不是每个浏览器都支持 picture 元素，还可以使用 Picturefill polyfill。

 

加载以及显示策略

 

多图渲染的情况下，结合懒加载，又要保证图像的渲染速度，类似知乎的渲染效果，我们可以使用 progressive-jpg。

 

相比 baseline-jpg 一行一行的扫描并显示图片，当然都是从弱网角度考虑，这种显示可能更合适。但还是有不足。参考了下知乎和 medium 等网站的示图效果，可以进行模拟：

 

先创建一个为图片占位的预留块，在这个块中会展示图片。块中有另外一个块会先设置一个 padding-bottom 来撑起块的高(即保证需要加载图像也是这个宽度高度的比例)。这样防止图片在加载时发生重排。

 

加载一个轻量版的图片。这个时候会先请求一个图片的缩略图。并使用模糊 blur 效果

 

等滚到到可视区域，加载高质量图，加载完毕后取消模糊效果。

 

medium 下的实现方式更为复杂点，是在缩略图加载完毕后，绘制到 canvas 画布，再通过一个自定义的模糊函数，类似于 StackBlur，同时请求高质量图。等到请求完，再隐藏画布。