{"id":7586,"date":"2018-03-06T12:00:02","date_gmt":"2018-03-06T15:00:02","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7586"},"modified":"2019-03-16T03:08:07","modified_gmt":"2019-03-16T06:08:07","slug":"como-aumentar-a-velocidade-da-pagina-com-lazy-loading","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/como-aumentar-a-velocidade-da-pagina-com-lazy-loading\/","title":{"rendered":"Como aumentar a velocidade da p\u00e1gina usando Lazy Loading em imagens"},"content":{"rendered":"

O Lazy Loading \u00e9 uma forma de adiar o processo ou carregamento de algo e pode ser utilizado em v\u00e1rias \u00e1reas. Utilizando em imagens, significa carreg\u00e1-las apenas quando estiver no viewport (\u00e1rea vis\u00edvel do navegador), aumentando a velocidade do carregamento da p\u00e1gina.<\/p>\n

Essa t\u00e9cnica \u00e9 usada atr\u00e1s do JavaScript, adicionando um atributo na tag img com endere\u00e7o completo da imagem, e enquanto vai sendo acessado na \u00e1rea vis\u00edvel, ela ir\u00e1 carregando.<\/p>\n

Essa t\u00e9cnica n\u00e3o \u00e9 nova, mas muitas vezes n\u00e3o era perform\u00e1tica com as t\u00e9cnicas utilizadas. O surgimento da API Intersection Observer<\/a>\u00a0, fez melhorar a performance para utilizar essa t\u00e9cnica de Lazy Loading nas imagens.<\/p>\n

Basicamente com\u00a0API Intersection Observer<\/strong>, \u00e9 poss\u00edvel\u00a0detectar quando o elemento entrar ou sair do viewport, sendo poss\u00edvel assim, otimizar mais a utiliza\u00e7\u00e3o da t\u00e9cnica do Lazy Loading<\/strong>.<\/p>\n

BIBLIOTECA LOZAD.JS PARA LAZY LOADING<\/h2>\n

\"Lozad.js\"<\/p>\n

O Lozad.js<\/a> \u00e9 uma biblioteca que utiliza o recurso da API Intersection Observe para realizar o carregamento Lazy Loading. Ele tem 731 bytes minificado e com gzip, n\u00e3o possui depend\u00eancia de framework ou biblioteca, permite carregamento de elementos dinamicamente e suporta imagens responsivas e background em elementos, como em div’s.<\/p>\n

Como Utilizar<\/h2>\n

Adicione a tag head do seu html o script do lozad.js, voc\u00ea utilizar via CDN:<\/p>\n

<script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/lozad\/dist\/lozad.min.js\"><\/script>\r\n<\/pre>\n
Agora nas suas imagens que voc\u00ea deseja ter o recurso do lazy loading, basta adicionar a classe lozad<\/strong>, e o atributo data-src<\/strong> com o endere\u00e7o da imagem.<\/p>\n
<img class=\"lozad\" data-src=\"nome-pasta\/imagem.jpg\" alt=\"Imagem\" \/>\r\n<\/pre>\n
Agora ap\u00f3s definir as imagens, voc\u00ea adiciona o script:<\/p>\n
<script type=\"text\/javascript\">\r\n lozad().observe();\r\n<\/script><\/pre>\n
Se quiser adicionar dentro do head, ap\u00f3s o script do lozad, voc\u00ea pode usar DOMContentLoaded<\/p>\n
<script type=\"text\/javascript\">\r\n document.addEventListener('DOMContentLoaded', function(){\r\n        lozad().observe();\r\n});\r\n<\/script><\/pre>\n
Caso queira utilizar em background a imagem para carregar Lazy Loading, o HTML ficaria assim:<\/p>\n
<div class=\"lozad\" data-background-image=\"nome-pasta\/imagem.png\">\r\n\r\n\r\n<\/div><\/pre>\n
Voc\u00ea pode criar um efeito simples de fade<\/strong> usando CSS, passando configura\u00e7\u00f5es para lozad.js<\/strong>, para adicionar essa classe na imagem. Segue o c\u00f3digo CSS:<\/p>\n
 .fadein {\r\n         animation-name: fadein;\r\n         animation-duration: 2s;\r\n            }\r\n\r\n        @keyframes fadein {\r\n            from {\r\n                opacity: 0;\r\n            }\r\n            to {\r\n                opacity: 1;\r\n            }\r\n        }<\/pre>\n
Vamos alterar o c\u00f3digo do lozad:<\/p>\n
<script>\r\n           lozad('.lozad', {\r\n                            load: function(target) {\r\n                                    target.src = target.dataset.src;\r\n                                    target.onload = function() {\r\n                                        target.classList.add('fadein');\r\n                                    }\r\n                            }\r\n            }).observe();\r\n        \r\n<\/script><\/pre>\n
Veja o resultado:<\/p>\n
https:\/\/www.mxcursos.com\/blog\/exemplos\/lazyloading<\/a><\/p>\n
Para dar suporte a navegadores mais antigos, basta utilizar o Polyfill, antes de chamar o script lozad.js<\/strong><\/p>\n
<script src=\"https:\/\/polyfill.io\/v2\/polyfill.min.js?features=IntersectionObserver\"><\/script>\r\n<\/pre>\n
Dessa forma, voc\u00ea consegue utilizar em navegadores que n\u00e3o d\u00e3o suporte\u00a0API Intersection Observer.<\/strong><\/p>\n
Essa \u00e9 uma \u00f3tima alternativa se voc\u00ea deseja aumentar a velocidade do carregamento da p\u00e1gina, principalmente se ela possui muitas imagens.<\/p>\n
Voc\u00ea tem alguma experi\u00eancia com lazy loading? Caso tenha, divida conosco essa experi\u00eancia!<\/p>\n
Espero que esse artigo tenha lhe ajudado e at\u00e9 a pr\u00f3xima.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
O Lazy Loading \u00e9 uma forma de adiar o processo ou carregamento de algo e pode ser utilizado em v\u00e1rias \u00e1reas. Utilizando em imagens, significa carreg\u00e1-las apenas quando estiver no viewport (\u00e1rea vis\u00edvel do navegador), aumentando a velocidade do carregamento da p\u00e1gina. Essa t\u00e9cnica \u00e9 usada atr\u00e1s do JavaScript, adicionando um atributo na tag img […]<\/p>\n","protected":false},"author":67,"featured_media":15355,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-7586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=7586"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/15355"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=7586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=7586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=7586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}