如何延迟加载 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，我发现“如何一张一张地为 Bootstrap 4 卡片设置动画？ ”但这是针对卡片上没有图像加载的动画。

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

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

在标签bootstrap-4下进一步搜索，我能够找到“ Bootstrap carousel Images not shows ”，但这集中在轮播而不是卡片上。

想偷懒负载后lazyload使用配方响应图像我省略了data-srcset＆data-sizes：

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

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

然而，我仍然面临的一个问题是图像是响应式的，所以我发现“使用“响应式”图像（未知高度）进行延迟加载”，但与我正在尝试做的事情相冲突。

在编写问题时确实出现了问答“延迟加载图像如何”，但它是从 2010 年开始的，肯定有更好的方法。

问题

在 Bootstrap 4.2 中，如何延迟加载卡片的图像，该卡片将呈现响应图像的适当高度和宽度，但在滚动时加载？Bootstrap 4 是否有内置的方式来延迟加载我丢失的图像？我的测试是在慢速 3G 网络上的 Chrome 中进行的。

如果我没有收到通知或者我的方法是错误的，请告诉我我以前没有玩过延迟加载。

---

回答后

我在引用后修改了 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我应该把它放在<script>标签每这里所以这就是我在Bootply已经做到了。

Answer 1

使用JS延迟加载插件，相当完整直观。

例子：

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

网址插件

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