Why does Bootstrap 4 card images use data-src and not src for image tags? -
in demo code below uses data-src no img src. how image applied? javascript modify somehow?
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 build on card title , make bulk of card's content.</p> <a href="#" class="btn btn-primary">button</a> </div> </div>
bootstrap 4 documentation uses holder.js, see http://imsky.github.io/holder/
also see: https://github.com/imsky/holder#usage
include holder.js in html:
holder process images specific src attribute, one:
the above tag render placeholder 300 pixels wide , 200 pixels tall.
to avoid console 404 errors, can use data-src instead of src.
holder included via http://v4-alpha.getbootstrap.com/assets/js/docs.min.js
Comments
Post a Comment