Sprite formas de pagamentos
O que é Sprite de imagens
Sprite de imagens é uma técnica que combina várias pequenas imagens em uma unica imagem maior. Ao utilizar esse método reduzimos o número de requisições HTTP.
Por exemplo, se uma loja utiliza 10 ícones pequenos de 30 x 30 pixels, carregá-los separadamente resultaria em 30 requisições diferentes. Usando sprite, esses 10 ícones seriam combinados em uma imagem 300 x 300 pixels e somente uma única requisição precisaria ser feita.
Para exibir as imagens individuais corretamente carregadas por Sprinte, usamos a propriedade CSS background-position
.
Sprite de imagens de pagamentos
A Tray disponibiliza a técnica de sprites para as imagens das formas de pagamento. Como a maioria das lojas possuem diversas formas de pagamento e elas geralmente são exibidas em ícones, usa-la faz muito sentido.
Utilizamos a classe .pag
para identificar onde a imagem de pagamento deve ser carregada e a classe .pag-lazy
para efetivamente carregar o sprite das imagens de pagamento. Cada forma de pagamento é identificada por uma classe própria iniciando por .pag-
.
A tabela abaixo mostra a classe e uma imagem representativa. A imagem carregada pode ser ligeiramente diferente.
O código abaixo mostra a implementação dos ícones de forma de pagamento utilizando a técnica de sprinte.
Last updated