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

Answer 2

背景图无法监听加载完成事件。
可以换成img标签做背景，然后监听onload事件，控制p的显隐。

如果字的颜色不是很刺眼的话，
也可以把banner的background-color设置成字体颜色，这样就看不出来有字了，等图片加载完成，背景色被遮挡，字自然就看得见了。

Answer 3

css我不太清楚，不过js可以使用img的onload事件，大概就是:

img.onload = function(){
    banner.innerHTML = 'xxxx';
}