背景图在文字内容之后加载怎么办呢?

Question

RT
我在渲染一个优惠券列表的时候由于优惠券背景样式复杂而且形状特殊，不得不使用背景图来实现效果，但是问题来了，当渲染列表的时候往往是先渲染文字内容，过后才渲染图片。。。这样体验就很糟糕，页面打开的时候就很丑

Answer 1

1. 类似 Tumblr 之前的做法，先使用图片生成一个 CSS 渐变色过渡，然后再慢慢加载图片。
2. 减小图片体积

Answer 2

尝试通过缓存机制，
做 sprite图 让背景图在你打开优惠券列表之前完成缓存！

当然这个是不稳定的，如果加载太慢的话,
img.onload 可以通过状态控制渲染状态

Answer 3

1、将图片压缩成base64格式来节约请求
2、使用CDN