title: Add Pre-Loader to responsive bootstrap card image?
body: <p>I am trying to make it so that as an image loads in my bootstrap card, it either has a placeholder image (to keep the card the same size) or a loading spinner. I cannot figure out how to do this, here is my current card html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card mb-4" data-clickable="true" data-href="#"&gt;
      &lt;img class="card-img-top" src="https://via.placeholder.com/700x400" alt="Card image cap"&gt;
  
      &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;John Doe&lt;/h5&gt;
      &lt;/div&gt;
  
      &lt;div class="card-footer"&gt;
          &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Obviously the placeholder will be replaced with the full image, but my current problem is that before the image loads on slow connection, the card collapses since the image isn't there to fill it. </p>