浅谈图片加载:逐行扫描VS交错扫描

一,前言

最近在不断地扩充自己web开发的知识面,看得比较泛,难得五一假期就在学习之余实践一下,毕竟纸上得来终觉浅,况且“纸上”的不一定都对,之前看了一篇博客讲图片加载的,博主大概是淘宝前端团队的吧,讲得很透彻,分享一下:

图片格式与设计那点事儿

虽然是10年的文章了,但是鉴于图片格式近几年并没有大的改动,而且博主讲得比较透彻,所以很有参考价值。

本篇博客只是对上面博客的验证以及在rails上的实践,推荐阅读上面那篇博客。

二,图片加载中的扫描方式

在带宽有限的时候显示大图片始终是个问题,特别在移动设备上,长加载时间导致了长白屏时间,用户体验不好。

如果细心观察各类网页上图片的加载,你会发现有从上到下(逐行扫描)的加载和先加载模糊的照片再逐渐变清晰(交错扫描)两种方式(网速不好时特别明显)。

图片加载方式

可见,为了效果明显,特地选了一张2M左右的照片,同样图片,同样大小(其实为了实验的可靠性,第二张特意调得大一些,多个20k吧),第二种方式的加载看似更快,先交错加载

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值