一,前言
最近在不断地扩充自己web开发的知识面,看得比较泛,难得五一假期就在学习之余实践一下,毕竟纸上得来终觉浅,况且“纸上”的不一定都对,之前看了一篇博客讲图片加载的,博主大概是淘宝前端团队的吧,讲得很透彻,分享一下:
虽然是10年的文章了,但是鉴于图片格式近几年并没有大的改动,而且博主讲得比较透彻,所以很有参考价值。
本篇博客只是对上面博客的验证以及在rails上的实践,推荐阅读上面那篇博客。
二,图片加载中的扫描方式
在带宽有限的时候显示大图片始终是个问题,特别在移动设备上,长加载时间导致了长白屏时间,用户体验不好。
如果细心观察各类网页上图片的加载,你会发现有从上到下(逐行扫描)的加载和先加载模糊的照片再逐渐变清晰(交错扫描)两种方式(网速不好时特别明显)。
可见,为了效果明显,特地选了一张2M左右的照片,同样图片,同样大小(其实为了实验的可靠性,第二张特意调得大一些,多个20k吧),第二种方式的加载看似更快,先交错加载