为什么卡片映像在Bootstrap 4中使用data-src(而非src)作为映像？

背景

在Bootstrap 4中，卡片组件被广泛使用于构建网页中的文章列表、商品信息等位置。其中，经常会配合使用卡片映像，以提高页面的美观性和信息的传达性。然而，与传统的img标签使用src属性加载映像不同，Bootstrap 4中的卡片映像通常使用data-src属性作为映像地址。

原因

卡片映像采用data-src属性作为映像地址的原因有以下几点：

1. 懒加载

采用data-src属性作为映像地址能够实现懒加载。即，在页面加载时，只加载可见区域内的卡片映像，而不会像使用src属性一样，一次性加载所有映像。这种方式可以加快页面的加载速度，并减轻服务器的负担。

2. 防止抖动

当采用src属性加载映像时，如果映像的高度或宽度没有提前设定好，会出现映像加载后网页抖动的情况。而采用data-src属性，可以先设定好映像的高度和宽度，等映像加载好后再将其替换为src属性的地址，从而避免了网页抖动的情况。

3. 数据缓存

采用data-src属性作为映像地址，可以在浏览器的缓存中缓存映像的数据，以提高下一次打开同一页面时的加载速度。因为使用data-src属性加载映像时，其数据并不是直接从src属性的地址中获取的，而是先下载到缓存中，等到显示时再进行显示。

总结

综合以上原因，在Bootstrap 4中采用data-src属性作为卡片映像的地址，不仅能够实现懒加载、防止抖动，还能够有效地节省服务器的负担和提高整体的加载速度。