本文探讨了web开发中图片加载的两种方式——逐行扫描和交错扫描（交错JPEG、PNG）。通过实例分析，解释了这两种加载方式的工作原理和在不同场景下的应用。在Rails中，利用MiniMagick处理图片，生成交错扫描的图片，以改善用户体验。在4G网络环境下，交错扫描可快速显示模糊图像，减少用户等待时间。
一，前言
最近在不断地扩充自己web开发的知识面，看得比较泛，难得五一假期就在学习之余实践一下，毕竟纸上得来终觉浅，况且“纸上”的不一定都对，之前看了一篇博客讲图片加载的，博主大概是淘宝前端团队的吧，讲得很透彻，分享一下：
虽然是10年的文章了，但是鉴于图片格式近几年并没有大的改动，而且博主讲得比较透彻，所以很有参考价值。
本篇博客只是对上面博客的验证以及在rails上的实践，推荐阅读上面那篇博客。
二，图片加载中的扫描方式
在带宽有限的时候显示大图片始终是个问题，特别在移动设备上，长加载时间导致了长白屏时间，用户体验不好。
如果细心观察各类网页上图片的加载，你会发现有从上到下（逐行扫描）的加载和先加载模糊的照片再逐渐变清晰（交错扫描）两种方式（网速不好时特别明显）。
可见，为了效果明显，特地选了一张2M左右的照片，同样图片，同样大小（其实为了实验的可靠性，第二张特意调得大一些，多个20k吧），第二种方式的加载看似更快，先交错加载
最低0.47元/天 解锁文章
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
