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

Question

我正在尝试弄清楚如何使用 card-img-top 延迟加载 card-columns，示例：

<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 and bootstrap I found "”，但这是针对卡片上的动画而未加载图像。

"Bootstrap-carousel lazy loader" 用于 Bootstrap 3.

在 Bootstrap 的文档中搜索，我能够 return 的唯一加载结果是 Spinners.

在标签 bootstrap-4 I was able to locate " 下进一步搜索，但重点是轮播而不是卡片。

在尝试使用 lazyload using the recipe 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 是否有内置的方法来延迟加载我丢失的图像？我的测试是在 Chrome 中在慢速 3G 网络上进行的。

如果我被误导或我的方法有误，请教育我，我以前没有玩过延迟加载。

回答后

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

Chrome网络显示：

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

评论请求

每个请求 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 这就是我在 Bootply 中所做的。

Answer 1

使用JS lazy load插件，比较完整直观。

示例：

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

URL 插件

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

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

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

lazy-loading

responsive-images

bootstrap-4

我的研究

问题

回答后

评论请求