为什么Bootstrap 4卡片图像使用data-src而不是src用于图像标签？

Question

在下面的演示代码中,它使用data-src但不使用img src.如何应用图像？javascript是否以某种方式修改了这个？

http://v4-alpha.getbootstrap.com/components/card/

 <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>

Answer 1

Bootstrap 4文档使用holder.js,请参阅http://imsky.github.io/holder/

另见:https://github.com/imsky/holder#usage

在HTML中包含holder.js:

然后,Holder将处理具有特定src属性的所有图像,如下所示:

上面的标记将呈现为300像素宽和200像素高的占位符.

要避免控制台404错误,可以使用data-src而不是src.

持有人通过http://v4-alpha.getbootstrap.com/assets/js/docs.min.js包含在内