问题
I have a 4 col layout with image thumbnails.
The code is as follows:
<!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>
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!
UPDATE:
For an example please look at the layout of http://www.bbc.com/
There images appear in the box of fixed dimension so content jumping is prevented.
回答1:
You need to wrap the image inside the div and set a height to the image. So until the image loads, CSS will render the height which will keep the layout intact.
回答2:
The method you used by wrapping <img> with <div> with fixed height is correct. But there may be some issues related to float that make the issue still exist. Try applying float:left or overflow:hidden for the wrapping <div> with height applied.
回答3:
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;
}
来源：https://stackoverflow.com/questions/51355644/how-to-prevent-content-jumping-while-images-are-loading