Bootstrap5 carousel 图片懒加载的实现

在Bootstrap carousel 中实现图片延迟加载的基本思路是：

• 首个轮播条目中的图片元素，正常设置图片的 src 属性，不做懒加载处理；
• 对其他轮播条目中的图片元素，将 src 属性留空，将源文件信息放置在一个自定义的属性中，以便条目轮播是读取处理；
• 在轮播事件中，为当前轮播的图片元素加载图片。

  <section id="hero">
    <div class="hero-container">
      <div id="heroCarousel" class="carousel slide carousel-fade carousel-lazy" data-bs-ride="carousel"
        data-bs-interval="50000">
        <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
        <div class="carousel-inner" role="listbox">
          <!-- Slide 1 -->
          <div class="carousel-item active" style="background-image: url('assets/img/slide/slide-1.jpg');">
            <div class="carousel-container">
              <div class="carousel-content container">
                <h2 class="animate__animated animate__fadeInDown">新能源利用与电气控制<br />国家级实验教学示范中心</h2>
                <p class="animate__animated animate__fadeInUp">探索 . 创新 . 引领 . 卓越</p>
                <!-- <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a> -->
              </div>
            </div>
          </div>
          <!-- Slide 2 -->
          <div class="carousel-item" data-src="url('assets/img/slide/slide-2.jpg')"
            style="background-image: url('assets/img/blank.png');">
            <div class="carousel-container">
              <div class="carousel-content container">
                <h2 class="animate__animated animate__fadeInDown">教学获奖成果</h2>
                <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor </p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </section>

上面的 html 中，首条 carousel-item 直接将图片路径赋予背景样式 background-image，其他的 carousel-item 在将图片信息放置到 data-src 属性中，同时将一个空白图片放置到背景样式，用以占位。注意，为后面的处理方便，data-src 属性的图片信息格式为 url( '...' ) 。

下面再实现条目的懒加载 :

window.addEventListener("load", (event) => {
  // Carousel image lazy 加载 
  var myCarousel = document.getElementById("heroCarousel");
  myCarousel.addEventListener('slide.bs.carousel', function (event) {
    var relatedTarget = event.relatedTarget;
    var data_src = relatedTarget.getAttribute("data-src");
    if (data_src) {
      console.log(data_src);
      relatedTarget.style.backgroundImage = data_src;
      relatedTarget.removeAttribute("data-src");
    } 
  })
});

Bootstrap5 不再基于 jquey , 所以上面代码也使用原生 JS 实现。

先通过 id , 取得 Carousel 元素，然后监听轮播事件 slide.bs.carousel 。事件对象有一个 relatedTarget 属性，对应当前的轮播元素。读取此元素的 data-src 属性，再根据它的取值结果赋予背景样式，并移除 data-src 属性。

参考文章

Lazy carousel in bootstrap

Bootstrap 5 — Carousel Customization