FC 14353 :: Como personalizar o recurso de Lazy Load?
Este recurso pode diminuir em até 80% o tempo de acesso às páginas da loja.
Em geral, o tempo de carga de uma página é proporcional à sua quantidade de imagens. Para minimizar este tempo de resposta, utilize o Lazy Load de imagens.
O Lazy Load é um recurso que permite que a carga de imagens ocorra somente quando estas são exibidas na tela. Imagens fora da tela só serão baixadas quando o visitante fizer a rolagem da página, fazendo com que fiquem visíveis. Isto melhora drasticamente a performance e otimiza o uso de rede, pois as imagens não exibidas de uma página longa não são baixadas desnecessariamente, caso o visitante não role a página até o final.
Em resumo o Lazy Load baixa as imagens dos produtos somente quando estiverem dentro da área visivel da tela. Isto aumenta a velocidade percebida em até 80%, em especial nos acessos feitos com smartphone.
Para utilizar este recurso, acesse a página Dados da Loja no site administrativo. Na seção Produtos, selecione o nível 2 no campo Lazy Load de imagens. Após gravar, navegue pelas páginas da loja para verificar se todas as imagens estão sendo exibidas.
Seguem abaixo as variáveis javascript disponíveis para alterar o comportamento padrão do Lazy Load. Estas variáveis podem ser inseridas/alteradas no Rodape.htm ou em arquivo .JS externo:
FCLib$.LazyLoadWaitImage
Utilizada para trocar a Imagem de wait/load exibida antes de mostrar a imagem carregada.
Valor padrão="/images/loading.gif" 
Exemplo:
FCLib$.LazyLoadWaitImage="<BaseLoja>images/suaImagem.svg";
FCLib$.xOffsetScreenLimits e FCLib$.yOffsetScreenLimits
Valores adicionais em pixels para ampliar a janela de carga das imagens, além da área visível.
Valor padrão=50
Exemplo:
FCLib$.xOffsetScreenLimits=100;
FCLib$.xMinShiftLazyLoad e FCLib$.yMinShiftLazyLoad
Valores em pixels de deslocamento mínimo da janela, que ocorre em scroll ou resize, para ativar os processamento de Lazy Load.
Valor padrão=50
Exemplo:
FCLib$.xMinShiftLazyLoad=150;
FCLib$.iMinTimerLazyLoad
Tempo mínimo em milissegundos entre cada execução de LazyLoad, que ocorre em scroll ou resize.
Valor padrão=250
Exemplo
FCLib$.iMinShiftLazyLoad=200;
FCLib$.iFadeTimeLazyLoad
Tempo em milissegundos para o fade in.
Valor padrão=500
Exemplo
FCLib$.iFadeTimeLazyLoad=800;
FCLib$.iFadeStepsLazyLoad
Quantidade de passos do fade in.
Valor padrão=10
Exemplo
FCLib$.iFadeStepsLazyLoad=40;
Importante:
Para evitar redimensionamentos durante a carga das imagens, padronize ou reserve espaço para as imagens no design da loja.
Se a loja utilizar sliders com imagens, é preciso chamar a função FCLib$.execLazyLoad() a cada evento de slide.
As opções 3 e 4 do campo de Lazy Load são para a utilização de Lazy Load desenvolvido pela loja. As tags <img> da loja serão geradas com parâmetro data-src=. O Lazy Load da loja deve localizar este parâmetro em cada img e substituir por src=.
Para desabilitar o fade in do Lazy Load, basta inserir a seguinte linha no arquivo Rodape.htm: FCLib$.iFadeTimeLazyLoad=0;
|
