是的,这是布莱恩的正确方法。
这样一来,您可以使用尺寸,颜色调色板或使用品牌徽标和验收标记等完全适合您的结帐的图像。通过这种方式,您可以制作出希望客户拥有的确切UX,并确保一切与您网站的外观无缝融合。
文档中有一个关于“ cardTypeChange”事件的快速示例,该事件还涵盖了页面上的其他元素,例如,使用与品牌相关的术语作为安全代码。
但这是一个更简单的片段,仅针对卡片图像更改
microformInstance.on('cardTypeChange', function(data) {
if (data.card.length === 1) {
yourCardImageElement.src = '/path/to/your/images/' + data.card[0].name + '.png';
} else {
yourCardImageElement.src = '/path/to/your/images/default.png';
}
});
请注意,事件会返回检测到的卡类型的数组,因此,您可能只想在将卡图像缩小为单个卡时显示该卡图像(如本例所示)。
或者,您可以使用此信息来逐渐隐藏或变成灰度(在阵列中未出现)的接受标记,以在用户键入时向用户提供动态反馈。
此外,当您完全控制图像时,可以选择执行一些操作,例如将图像添加到站点可能具有的现有Sprite工作表中,并获得将所有图像预先加载的好处,然后仅使用css类进行管理。
大多数网络为如何使用其标记和各种图像格式的原始资料提供了出色的指导。以下是一些有用的链接: