logo

讨论【前端】UI出图属性不同引起网页加载图片异常

头像
young
19阅读2评论8 个月前

背景
*
UI给出切图后,banner大图实际尺寸为100KB大小,在本地项目中运行网页不存在任何问题,图片用看图工具打开也不存在任何问题。 就这样上线发布了。。。

问题来了
*
发布后,通过外网访问网页发现首屏的banner图整体会从灰黑色开始从上到下一节一节加载成彩色原图,这样体验是灰常不好的,排查程序问题许久确认程序不存在问题,服务环境同样不存在问题,那么问题只能在图上了,换了通尺寸的图果然情况不一样了。 新的图会保证原图色彩,但是不会整体直接显示出来、而是从上到下一节一节渲染出来, 之前是整体全部灰白色出来之后一节一节渲染成彩色。 通过最蠢的方式提高带宽 提升网页加载速度 解决问题。

探讨
*
UI切图出图方式 一种是 色彩渐变 一种是标准色,两种方式造成浏览器加载图片是两种方式,因而必须得搞清楚浏览器加载这图片是到底发生了什么,诚邀各位居民一起交流下。

题外话
*
由此想起了 一张背景图 引爆三星手机的趣事儿。哪位胆子大的居民谁是三星手机,可以拿这张图去做手机壁纸,看会不会双清或循环开关机

城市:
西安
加载中…
精选评论
头像
8 个月前墨染绘手

懒加载,骨架屏它不香吗🤓

头像
8 个月前188****5446

本来图片就有两种加载形式,一种逐行栅格式,一种是整图从模糊到清晰,不过你这种我没试过,可能是新技术