css,如何才能等background里的背景图片加载完，再显示上面的文字？

Question

比如我做了一个banner

banner的图片使用background属性引入的

<div class="banner">
  <p>标题</p>
  <p>描述</p>
</div>

比如类似上述结构

但目前会出现一个问题，如果banner的背景图片比较大的话，那么页面会先显示p标签中的文字，然后再逐渐显示背景图片

这样给用户的感受就是一开始凭空出现了两行文字，很奇怪

有什么办法可以优化这种情况吗？

Answer 1

1. 背景图地址存在 data-src 上
2. banner 定高， p 隐藏
3. 页面加载时获取 banner 元素， 获取 data-src
4. 新建 img 元素，赋值 img.src = data-src 监听 img.onload
5. img.onload 回调里 修改 banner 背景样式 加上背景图
6. 显示 p