【发布时间】：2019-06-06 14:55:27
【问题描述】：
我想弄清楚如何用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 和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”，但重点是轮播而不是卡片。
在尝试使用Responsive images 配方对lazyload 进行延迟加载后，我省略了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 中所做的。
【问题讨论】：
-
我真的不明白问题/问题是什么。鉴于正确的标记，LazyLoad 插件似乎工作正常：codeply.com/go/0sduGt67Rf
-
为什么投反对票？
标签： bootstrap-4 bootstrap bootstrap-4 bootstrap-4 lazy-loading responsive-images