如何防止图像加载时内容跳跃？
我有一个带有图片缩略图的4列布局。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>KTM Cart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta content='width=device-width, initial-scale=1' name='viewport'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/71"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/71/PCR15_10D23X_ENVIRO_SQ.jpg" alt="Pcr15 10d23x enviro sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Sign
-
$23.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="NY3tjz7PeQ3QNlBvMx0qY0aF8UjYG7ve3BpPYesneuqxV0eLJGMiIp3pxuMjc0MbQ8jE1apFtKtagCSdodM39g==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="71" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/72"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/72/PCR15_15P317X_ENVIRO_SQ__1_.jpg" alt="Pcr15 15p317x enviro sq 1 " />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Post
-
$32.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="fccnLj9VBQfZx8PfGNNcCJuDgvoUBJFrjnTKpF5TIPz5HY0qJfleKJQYVVMIvTVwns63Z2Zanh4I7qFYFKdt4A==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="72" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/73"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/73/PCR17_12SP155_16x16_ENVIRO_V2_SQ.jpg" alt="Pcr17 12sp155 16x16 enviro v2 sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Frame
-
$43.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="jhyuuFWo7Ay/km9/FhdRnvVp6HKq1EwTQ/a40sg9CkUKxgS8TwS3I/JN+fMGeTjm8CTd79iKQ2bFbNMugslHWQ==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="73" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/74"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/74/RED15_15REH36_WDR_SILVER_SQ.jpg" alt="Red15 15reh36 wdr silver sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Plate
-
$32.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="E+vS9UnB6VsNwURH3YQBIPj2Ujekj6Ll5Y3ahD4+RjyXMXjxU22ydEAe0svN6mhY/btnqtbRrZBjF7F4dMoLIA==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="74" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/76"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/76/RED17_18RES6_ENVIRO_SQ.jpg" alt="Red17 18res6 enviro sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Charger
-
$421.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="02gSs0Ih218t2v6+fbhy4Ro7a9qf9jczFRQuRHaL7gVXsri3WI2AcGAFaDJt1huZH3ZeR+2oOEaTjkW4PH+jGQ==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="76" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/77"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/77/RED17_18RES20X_ENVIRO_LIT_SQ.jpg" alt="Red17 18res20x enviro lit sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Wooden Frame
-
$43.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="29myoPci0jCZ7AmNtemmXumHlfscEdwO6BDJfsHVXwtfAxik7Y6JH9QznwGlh88m7MqgZm5P03tuiqKCiyESFw==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="77" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/78"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/78/RED17_18RES26_WDR_SQ.jpg" alt="Red17 18res26 wdr sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Watches
-
$32.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="BlC0nEu9+nnmpjU56U1QFMk8feLIvJ0x+QbjqKMOb2iCih6YURGhVqt5o7X5IzlszHFIf7rikkR/nIhU6foidA==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="78" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/79"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/79/RED18_18REF12X_ENVIRO_SQ.jpg" alt="Red18 18ref12x enviro sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Dolls
-
$41.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="lM7G6iXd8+qRbvu3YrZiUppGg+22oNU23ApR70of21IQFGzuP3GoxdyxbTty2Asqnwu2cMT+2kNakDoTAOuWTg==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="79" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/80"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/80/RED18_18REF14_ENVIRO_SQ.jpg" alt="Red18 18ref14 enviro sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Wall Clock
-
$51.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="4HrP8Oy/ohuS+3aoUoEyhQ1OZxlwkmhfTHt5xfY+qu1koGX09hP5NN8k4CRC71v9CANShALMZyrK4RI5vMrn8Q==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="80" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/81"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/81/RED18_18REH21BK_WDR_SQ.jpg" alt="Red18 18reh21bk wdr sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Deer
-
$71.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="+xGtt0hzVHiOaZO/2bJmzBIuWpxRZUH0TtkRam9TMal/ywezUt8PV8O2BTPJ3A+0F2NvASM7ToHIQ3qWJad8tQ==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="81" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/82"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/82/RED18_18REH28TN_WDR_EDITED_SQ.jpg" alt="Red18 18reh28tn wdr edited sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Book
-
$51.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="bsrtFfe0Qz5OcnE8ZKIu0V58Z54xSLr89a8s8Z8lQoXqEEcR7RgYEQOt57B0zEepWzFSA0MWtYlzNUcN1dEPmQ==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="82" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/83"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/83/RED18_18RES70_WDR_SQ.jpg" alt="Red18 18res70 wdr sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Bangle
-
$41.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="/luaLmb53A1PrNTUKYBwC36ZgGWPkceXXOWd4FxYMX56gTAqfFWHIgJzQlg57hlze9S1+P3PyOLaf/YcFqx8Yg==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="83" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/84"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/84/RED18_18RES71X_WDR_SQ.jpg" alt="Red18 18res71x wdr sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Money Clip
-
$42.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="6tkipTfY6E8J5J0AWPuICdX9wOwp2pe+/N+pKfXRNh9uA4ihLXSzYEQ7C4xIleFx0LD1cVuEmMt6RcLVvyV7Aw==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="84" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/85"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/85/RED17_18RES8X_WDR_SQ.jpg" alt="Red17 18res8x wdr sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Pedant
-
$24.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="/WbnWYDbDavvgW5bxM/RcKFPNoh1Om7Y9ETdIS44Lpd5vE1dmndWhKJe+NfUobgIpAIDFQdkYa1y3rbdZMxjiw==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="85" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/86"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/86/elephant.jpg" alt="Elephant" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Elephant
-
$27.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="/bcemiDzSUWhH8msacsk84mBWa/Y9ADp4T84grk4Lfp5bbSeOl8SauzAXyB5pU2LjMxsMqqqD5xnpVN+88xg5g==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="86" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-md-3 col-sm-6 col-6 mb-4'>
<div class='card'>
<div>
<a href="/public/75"><img width="300px" height="200px" class="img-thumbnail img-fluid" src="/uploads/product/photo/75/RED16_16RES16M_WDR_CP_SQ.jpg" alt="Red16 16res16m wdr cp sq" />
</a>
</div>
<div class='card-body'>
<p class='card-text'>
Bag
-
$141.00
</p>
<form class="new_order_item" id="new_order_item" action="/order_items" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="//9cCdQi7iPgN+lOu+z///giGwUkZXwUDeoayXGTXu97JfYNzo61DK3of8KrgpaH/W8umFY7c2GLcHE1O2cT8w==" />
<div class='input-group'>
<input value="1" class="form-control" type="hidden" name="order_item[quantity]" id="order_item_quantity" />
<div class='input-group-btn'>
<input value="75" type="hidden" name="order_item[product_id]" id="order_item_product_id" />
<input type="submit" name="commit" value="Add to Cart" class="btn btn-primary btn-sm" data-disable-with="Add to Cart" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
问题是当页面正在加载时，图像部分最初被折叠，而图像加载完成时，图像出现。这给出了跳跃效果。在图像完成下载并显示之前，如何显示固定大小的空框。这样可以防止内容跳跃。我什至尝试过将图像包装在具有固定高度和宽度的div标签中，但这似乎不起作用。感谢您的帮助！谢谢！
更新：
例如，请查看http://www.bbc.com/
的布局在固定尺寸的框中出现图像，因此可以防止内容跳跃。
3 个答案:
答案 0 :(得分：0)
您需要将图像包装在div内并为图像设置高度。因此，在加载图像之前，CSS会渲染高度，以保持布局完整。
答案 1 :(得分：0)
您将+---+------------+
| id| items|
+---+------------+
| 0| [1, 2, 5]|
| 1| [1, 2, 5]|
| 2| [1, 2]|
+---+------------+
和<img>用固定高度包裹起来的方法是正确的。但是可能存在一些与浮动相关的问题，这些问题仍然存在。尝试将<div>或float:left应用于包裹了高度的包裹overflow:hidden。
答案 2 :(得分：0)
好的，这个技巧对我有用，其中img包装div具有类项目。
.img-thumbnail {
max-width: 100%;
height: auto;
}
.item {
min-height: 300px;
max-height: auto;
float: left;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？