Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.7k views
in Technique[技术] by (71.8m points)

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

比如我做了一个banner

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

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

比如类似上述结构

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...