如何延迟加载Bootstrap 4卡的图像？

Question

我试图弄清楚如何用card-columns延迟加载card-img-top，例如：

<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>

我的研究

通过标签bootstrap-4和bootstrap搜索，我发现“ How to animate Bootstrap 4 cards one by one?”，但这是用于不加载图像的卡片上的动画的。

“ Bootstrap-carousel lazy loader”用于Bootstrap 3。

在Bootstrap的文档中搜索，我唯一能返回的加载结果是Spinners。

在标签bootstrap-4下进行了进一步搜索，我可以找到“ Bootstrap carousel Images not showing”，但它侧重于轮播而不是卡。

[尝试使用配方lazyload延迟加载Responsive images后，我省略了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>

但是我仍然要面对的一个问题是图像响应迅速，所以我发现“ Lazy loading with “responsive” images (unknown height)”，但与我要执行的操作冲突。

写问题时确实出现了问与答“ Lazy loading images how”，但这是从2010年开始的，并且肯定有更好的方法。

问题

在Bootstrap 4.2中，如何才能懒惰地加载卡的图像，该卡将呈现相应的响应图像的高度和宽度，但在滚动时加载？ Bootstrap 4有内置的方式来延迟加载我丢失的图像吗？我的测试是在速度较慢的3G网络上的Chrome中执行的。

如果我不了解情况或方法错误，请告诉我以前我没有玩过延迟加载。

---

回答后

我在referencing之后修改了HTML：

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

Chrome网络节目显示：

延迟加载也被添加到FFFFFF&text=loading，因此应该加载的第一张图像应该是jumbo.jpg。

---

评论请求

每个请求我尝试演示代码的Bootply。尚未使用Bootply，但每次运行JavaScript的研究我都应该将其放置在每个<script>的here标记中，这就是我在Bootply中所做的。

Answer 1

使用JS延迟加载插件，它非常完整和直观。

Answer 2

可以通过多种方式完成延迟加载，