Я пытаюсь понять, как лениво загрузить 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 3.
Поиск в документации Bootstrap единственный результат загрузки, который я могу вернуть, - Spinners .
Поиск по тегу bootstrap-4 Мне удалось найти " Bootstrap carousel. Изображения, на которых не отображается ", но которые сосредоточены на карусели, а не на карточках.
После попытки ленивой загрузки с 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>
Однако одна проблема, с которой я все еще сталкиваюсь, заключается в том, что изображения реагируют, поэтому я обнаружил " Ленивая загрузка с" отзывчивыми "изображениями (неизвестная высота) ", но конфликтует с тем, что я пытаюсь сделать.
Вопросы и ответы " Ленивая загрузка изображений, как " действительно появилась при написании вопроса, но это с 2010 года, и, безусловно, есть лучший подход.
Вопрос
В Bootstrap 4.2 как я могу лениво загружать изображения для карты, которая будет отображать соответствующую высоту и ширину адаптивного изображения, но загружаться при прокрутке? Есть ли у Bootstrap 4 встроенный способ ленивой загрузки изображений, который мне не хватает? Мои тесты проводятся в Chrome в медленной сети 3G.
Если я неправильно информирован или мой подход неверен, пожалуйста, дайте мне знать, что я раньше не играл с ленивой загрузкой.
После ответа
Я изменил 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 Network показывает:
отложенная загрузка также была добавлена к FFFFFF&text=loading, поэтому первое изображение, которое должно было быть загружено, было бы jumbo.jpg.
Комментарий Комментарий
За запрос Bootply из того, что я пытался продемонстрировать в коде. Я не использовал Bootply, но в каждом исследовании для запуска JavaScript я просто поместил его в <script> тегов для здесь , так что это то, что я сделал в Bootply.