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

Chrome联网显示：

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

评论请求

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

Answer 1

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

示例：

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

JS

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

Answer 2

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

您可以使用此库，只需进行初始化，它使用数据属性“ data-echo” 跟踪图像以延迟加载

这里是example，我认为您可以轻松做到这一点：）

echo.init();

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

我的研究

问题

回答后

评论请求

2 个答案: