如何防止图像加载时内容跳跃? [英] how to prevent content jumping while images are loading?
本文介绍了如何防止图像加载时内容跳跃?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有图片缩略图的4列布局.
I have a 4 col layout with image thumbnails.
代码如下:
<!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标签中，但这似乎不起作用.感谢您的帮助！谢谢！
The problem is when the page is loading the image section is initially collapsed and when image loading is complete the image appears. This gives jumping effect. How can i show empty box of fixed size before the image finishes downloading and show it. This will prevent content jumping. I even tried by wrapping image in div tag with fixed height and width and it doesn't seem to work. I appreciate any help! Thanks!
更新:
例如，请查看 http://www.bbc.com/
在固定尺寸的框中出现图像，因此可以防止内容跳跃.
There images appear in the box of fixed dimension so content jumping is prevented.
推荐答案
好的，这个技巧对我有用，因为img包装div包含类项目.
ok this trick worked for me where the img wrapping div has class item.
.img-thumbnail {
max-width: 100%;
height: auto;
}
.item {
min-height: 300px;
max-height: auto;
float: left;
}
这篇关于如何防止图像加载时内容跳跃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
