如何防止图像加载时内容跳转？
Posted
技术标签:
【中文标题】如何防止图像加载时内容跳转？【英文标题】：how to prevent content jumping while images are loading? 【发布时间】：2018-12-23 15:16:32 【问题描述】：我有一个带有图像缩略图的 4 col 布局。
代码如下：
<!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 class="img-thumbnail img-fluid" src="/uploads/product/photo/71/PCR15_10D23X_ENVIRO_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/72/PCR15_15P317X_ENVIRO_SQ__1_.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/73/PCR17_12SP155_16x16_ENVIRO_V2_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/74/RED15_15REH36_WDR_SILVER_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/76/RED17_18RES6_ENVIRO_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/77/RED17_18RES20X_ENVIRO_LIT_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/78/RED17_18RES26_WDR_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/79/RED18_18REF12X_ENVIRO_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/80/RED18_18REF14_ENVIRO_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/81/RED18_18REH21BK_WDR_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/82/RED18_18REH28TN_WDR_EDITED_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/83/RED18_18RES70_WDR_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/84/RED18_18RES71X_WDR_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/85/RED17_18RES8X_WDR_SQ.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/86/elephant.jpg" />
</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 class="img-thumbnail img-fluid" src="/uploads/product/photo/75/RED16_16RES16M_WDR_CP_SQ.jpg" />
</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/的布局
固定尺寸的框内出现图片，防止内容跳转。
【问题讨论】：
看这里：css-tricks.com/content-jumping-avoid 【参考方案1】：您需要将图像包裹在 div 中并为图像设置高度。因此，在图像加载之前，CSS 将呈现高度，从而保持布局不变。
【讨论】：
我已将图像包裹在 div 块中 . 所以高度等于200根香蕉？或者可能是200英寸？我很困惑，不是吗？ 你必须为宽度和高度添加单位，比如'px' 好的，我已经尝试设置px，但仍然有跳跃效果。请查看上面的更新代码。对不起，我没有很多前端经验，所以我向前端专家寻求帮助。谢谢！【参考方案2】：您使用固定高度将<img> 与<div> 包装的方法是正确的。但是可能存在一些与浮动相关的问题，使问题仍然存在。尝试应用 float:left 或 overflow:hidden 包装 <div> 并应用高度。
【讨论】：
【参考方案3】：好的，这个技巧对我有用，其中 img 包装 div 有类项目。
.img-thumbnail
max-width: 100%;
height: auto;
.item
min-height: 300px;
max-height: auto;
float: left;
【讨论】：
以上是关于如何防止图像加载时内容跳转？的主要内容，如果未能解决你的问题，请参考以下文章