twitter-bootstrap-4 - 为什么 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

Include holder.js in your HTML:

Holder will then process all images with a specific src attribute, like this one:

The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.

To avoid console 404 errors, you can use data-src instead of src.

通过 http://v4-alpha.getbootstrap.com/assets/js/docs.min.js 包含支架