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.

Classe

Ícone

O código abaixo mostra a implementação dos ícones de forma de pagamento utilizando a técnica de sprinte.

Código

<ul class="payment-list row">
    {% for payment in paymentMethods.order %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %}
    {% for payment in paymentMethods.credit %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %} 
</ul>

PreviousDefinição largura e altura NextBoas Práticas

Last updated 2 years ago