How to lazy load a Bootstrap 4 card's image?

Question

Im trying to figure out how to lazy load card-columns with card-img-top, example:

<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="img/foo.jpg" alt="foo" />
        <div class="card-body">
            <!-- more code -->
        </div>
    </div>
</div>

My research

Searching through the tag bootstrap-4 and bootstrap I found "How to animate Bootstrap 4 cards one by one?" but that is for animations on the cards without an image loading.

"Bootstrap-carousel lazy loader" is for Bootstrap 3.

Searching in Bootstrap's documentation the only loading result I'm able to return is for Spinners.

Searching further under the tag bootstrap-4 I was able to locate "Bootstrap carousel Images not showing" but that is focused on the carousel and not cards.

After trying to lazy load with lazyload using the recipe Responsive images I omitted the data-srcset & data-sizes:

    var myLazyLoad = new LazyLoad({
        elements_selector: ".lazy"
    });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-columns">
    <div class="card text-center">
        <img class="card-img-top lazy" src="https://via.placeholder.com/300x150.png?text=this-is-a-sample" alt="foo" />
        <div class="card-body">
        <h3 class="card-title">Foo</h3>
        <p class="card-text">Bacon ipsum dolor amet chuck tenderloin flank, shoulder buffalo sausage pork biltong ribeye drumstick jowl. Bacon flank salami, tri-tip chuck alcatra beef ribs brisket shankle ground round ham hock sausage t-bone. Ham hock frankfurter flank biltong cow. Flank picanha chuck meatball, porchetta pork loin frankfurter shank jerky pancetta bacon. Shoulder ham hock biltong shank meatloaf filet mignon sirloin corned beef kevin fatback landjaeger ham andouille burgdoggen cupim. Alcatra salami ball tip, bresaola tenderloin leberkas pig turducken pancetta ground round. Beef ribs tenderloin landjaeger chicken bresaola shankle, buffalo picanha ribeye fatback shoulder salami porchetta pancetta tongue.</p>
        </div>
    </div>
    <div class="card text-center">
        <img class="card-img-top lazy" src="https://via.placeholder.com/300x150.png?text=this-is-a-sample" alt="foo" />
        <div class="card-body">
        <h3 class="card-title">Foo</h3>
        <p class="card-text">Bacon ipsum dolor amet chuck tenderloin flank, shoulder buffalo sausage pork biltong ribeye drumstick jowl. Bacon flank salami, tri-tip chuck alcatra beef ribs brisket shankle ground round ham hock sausage t-bone. Ham hock frankfurter flank biltong cow. Flank picanha chuck meatball, porchetta pork loin frankfurter shank jerky pancetta bacon. Shoulder ham hock biltong shank meatloaf filet mignon sirloin corned beef kevin fatback landjaeger ham andouille burgdoggen cupim. Alcatra salami ball tip, bresaola tenderloin leberkas pig turducken pancetta ground round. Beef ribs tenderloin landjaeger chicken bresaola shankle, buffalo picanha ribeye fatback shoulder salami porchetta pancetta tongue.</p>
        </div>
    </div>
    <div class="card text-center">
        <img class="card-img-top lazy" src="https://via.placeholder.com/300x150.png?text=this-is-a-sample" alt="foo" />
        <div class="card-body">
        <h3 class="card-title">Foo</h3>
        <p class="card-text">Bacon ipsum dolor amet chuck tenderloin flank, shoulder buffalo sausage pork biltong ribeye drumstick jowl. Bacon flank salami, tri-tip chuck alcatra beef ribs brisket shankle ground round ham hock sausage t-bone. Ham hock frankfurter flank biltong cow. Flank picanha chuck meatball, porchetta pork loin frankfurter shank jerky pancetta bacon. Shoulder ham hock biltong shank meatloaf filet mignon sirloin corned beef kevin fatback landjaeger ham andouille burgdoggen cupim. Alcatra salami ball tip, bresaola tenderloin leberkas pig turducken pancetta ground round. Beef ribs tenderloin landjaeger chicken bresaola shankle, buffalo picanha ribeye fatback shoulder salami porchetta pancetta tongue.</p>
        </div>
    </div>
</div>

However one issue I still face is the images are responsive so I found "Lazy loading with “responsive” images (unknown height)" but conflicts with what I'm trying to do.

The Q&A "Lazy loading images how" did appear when writing the question but it's from 2010 and surely there's a better approach.

The Question

In Bootstrap 4.2 how can I lazy load images for a card that will render the appropriate height and width of the responsive image but load on scroll? Does Bootstrap 4 have a built in way to lazy load images that I'm missing? My tests are being performed in Chrome on a Slow 3G network.

If I'm miss-informed or my approach is wrong please educate me I haven't played with lazy loading before.

---

After answer

I've modified the HTML after referencing:

<img class="card-img-top lazyload" src="img/foo.jpg" data-src="img/foo.jpg" data-original="img/foo.jpg 480w, img/foo.jpg 640w, img/foo.jpg 1024w" alt="foo" width="765" height="auto" lazyload="on" />
<img class="card-img-top lazyload" src="img/bar.jpg" data-src="img/bar.jpg" data-original="img/bar.jpg 480w, img/bar.jpg 640w, img/bar.jpg 1024w" alt="fire" width="765" height="auto" lazyload="on" />

Script called:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
<script>$("img .lazyload").lazyload();</script>

Chrome Network shows:

lazy load was also added to FFFFFF&text=loading so the first image that should have loaded would have been jumbo.jpg.

---

Comment Request

Per request a Bootply of what I've tried demoing the code. Haven't used Bootply but per research to run JavaScript I should just place it in <script> tags per here so that is what I've done in the Bootply.

Answer 1

Use the JS lazy load plugin, it is quite complete and intuitive.

Example:

https://imagekit.io/blog/lazy-loading-images-complete-guide/

URL plugin

https://github.com/tuupola/jquery_lazyload

HTML

<!-- Begin Body -->
<div class="container-fluid" id="main">
    <div class="row">

            <div class="col-md-12">
                <h2>Image Grid with Lazy Loading Images</h2>
                <p class="lead">Images will load as you scroll down</p>
                <hr>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-body"><img data-original="/assets/templates/tmp_129821.png" class="img-responsive"></div>
                </div>              
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-body"><img data-original="/assets/templates/tmp_128936.png" class="img-responsive"></div>
                </div>              
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-body"><img data-original="/assets/templates/101004.png" class="img-responsive"></div>
                </div>              
            </div>  
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-body"><img data-original="/assets/templates/100993.png" class="img-responsive"></div>
                </div>              
            </div>  
        </div><!--/row-->
    </div>
</div>

JS

$('#main .img-responsive').lazyload();