99.场景分析 - Githubissues

zlx362211854 / daily-study

每日一个知识点总结，以issue的形式体现

10 stars 6 forks source link

99.场景分析 #155

Open nanslee opened 4 years ago

nanslee commented 4 years ago

日常访问网站过程，如果遇到网络加载速度慢，那么在有图片加载的页面就是出现页面抖动的场景，即图片未加载完时高度为0，下面的元素会先占用图片的位置，等图片加载完后页面再重排，这样对用户体验是不有好的，那么针对这个问题你有什么想法呢？

提示：

//  想想 .inner_box 的高度是多少，固定吗？
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .box {
      width: 100%;
    }
    .inner_box {
      padding-top: 20%;
      background: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner_box"></div>
  </div>
</body>
</html>

zlx362211854 commented 4 years ago

使用padding-bottom来占位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 盒子层 */
.box {
  width: 800px;
  height: 600px;
}
/* 占位层，通过padding-bottom帮忙占住图片的位置，（600 / 800 = 75%） */
.box::after {
  content: '';
  height: 0;
  padding-bottom: 75%;
}
</style>
</head>
<body>
<div class="box">
  <img src="https://tva1.sinaimg.cn/large/006tNbRwgy1ga3813qmnuj30m80go0uk.jpg" alt="" class="img">
</div>
<div>图片下面的文字图片下面的文字图片下面的文字图片下面的文字</div>
</body>
</html>

goldEli commented 4 years ago

改变img为块级元素，设置宽高，这样在未加载完成时就不会塌陷。
div 替代 img，用 background-image 设置图片。但这样做改变了图片标签的语义会影响搜索引擎抓取。
最好的体验是，在图片未加载成功，占位的同时展示占位背景。

<div class="placeholder">
    <img src="myimage.jpeg" />
</div>

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}