如何延迟加载引导4卡的映像？

Question

我正在试图找出如何使用卡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中搜索，我找到了“如何一张接一张地设置bootstrap 4卡的动画？”但这是针对没有图像加载的卡上的动画。

“引导转盘惰性加载程序”用于引导3。

在标签bootstrap-4下进一步搜索，我能够找到“bootstrap carousel Images not showing”，但重点是carousel，而不是cards。

在尝试使用recipe Responsive images延迟加载lazyload之后，我省略了数据集

    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>

然而，我仍然面临的一个问题是图像是有响应的，所以我发现“延迟加载有响应的图像（未知高度）”，但这与我试图做的有冲突。

Q

在Bootstrap 4.2中，我如何为一张能够呈现适当高度和宽度的响应图像但在滚动中加载的卡延迟加载图像？Bootstrap4是否有一种内置的方式来延迟加载我丢失的映像？我的测试是在一个缓慢的3G网络上用Chrome进行的。

我在引用后修改了超文本标记语言：

<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/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script>$("img .lazyload").lazyload();</script>

Chrome网络显示：

延迟加载也被添加到FFFFFF

每一个请求一个我试着演示代码的引导层。没有使用Bootply，但根据研究，我应该将它放在




Answer 1

使用JS lazy load插件，它非常完整和直观。

例子：

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

URL插件

https://github.com/tuupola/jquery_lazyload

超文本标记语言

<!-- 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();