Não apenas o carregamento lento de imagens em páginas da web ajudam no desempenho da idade, mas também ajuda em Search Engine Optimization conforme observado. Você pode usar jQuery e até Mootools para imagens de carregamento lento. As imagens só aparecerão quando você rolar até elas.
Esta dica do jQuery reduz muitas solicitações externas durante o carregamento da página, ajudando o seu blog WordPress a carregar mais rápido. Ao usar esse truque, você também deve usar a técnica de cache para simplificar o carregamento da página.
Conteúdo
O que é Lazy Loading?
O carregamento lento é quando você baixa o conteúdo conforme necessário, em vez de baixar tudo de uma vez.
O carregamento lento é uma técnica de otimização usada na Internet. Ele carrega apenas a seção da página da web que você precisa no início e não carrega nenhuma outra parte até que você clique nelas. Dessa forma, não é necessário carregar todas as informações do início ao fim.
Uma forma de carregamento lento é chamada de rolagem infinita. Isso significa que, conforme você rola a página para baixo, mais conteúdo é carregado automaticamente.
Por que o carregamento lento é importante?
A enorme carga útil de uma página da web está cheia de imagens, scripts, folhas de estilo, fontes e vídeos. Imagens tiradas acima de 60% do tamanho de uma página da web típica. Não é possível eliminá-los porque são importantes para o desenho de uma página web.
Sem qualquer otimização, seu navegador baixa tudo antes de renderizar a página. Isso torna o carregamento da página mais lento.
Faz sentido fazer o possível para que suas páginas da web carreguem mais rápido. E, quando se trata de imagens, elas são as que mais contribuem para o tamanho de um site.
Portanto, se você começar com eles, é uma boa ideia porque seu site carregará rapidamente. É aqui que o carregamento lento se torna útil, pois ele baixa apenas as partes de uma imagem que estão à vista em sua página a qualquer momento.
Como configurar o Lazy Loading com jQuery?
Existem plug-ins que permitem realizar coisas simples, mas quanto menos quanto menos plug-ins você usar, mais eficiente será o seu blog.
Não importa qual tema WordPress você está usando, você pode implementar o carregamento lento com muita facilidade.
É apenas um tutorial de duas etapas, uma para adicionar o jQuery e a outra é atribuir uma classe à tag img, se você quiser carregar imagens específicas em seu blog WordPress de maneira lenta.
Aqui está a função jQuery, que você precisará adicionar aos scripts do seu tema.
/ * lazyload.js (c) Lorenzo Giuliani * Licença MIT (http://www.opensource.org/licenses/mit-license.html) * /! function (window) {var $ q = function (q, res) {if (document.querySelectorAll) {res = document.querySelectorAll (q); } else {var d = document, a = d.styleSheets [0] || d.createStyleSheet (); a.addRule (q, 'f: b'); for (var l = d.all, b = 0, c = [], f = l.length; b = 0 && rect.left> = 0 && rect.top)} var images = new Array (), query = $ q ('img.lazy'), processScroll = function () {for (var i = 0; i <images.length; i ++) {if (elementInViewport (images [i])) {loadImage (images [i], function () {images.splice (i, i);}); }}; }; // Array.prototype.slice.call não pode ser chamado em nosso adorável IE8 para (var i = 0; i <query.length; i ++) {images.push (query [i]); }; processScroll (); addEventListener ('scroll', processScroll); }(isto);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
E aqui está como você pode chamar a função jQuery para implementar o carregamento lento de imagens dinamicamente. Você precisa usar a classe lazy para cada imagem que deseja carregar usando a função jQuery.
Conclusão
Lazyload é uma boa opção para seu blog ou site corporativo. Isso ajuda com o SEO e o Google pode ver isso. Mas você não precisa se preocupar com isso porque eles sabem como funciona o lazyloading.
Você também pode personalizá-lo como quiser alterando a animação e adicionando um atraso.
Oi,
É uma boa informação e é muito útil. Preguiçoso É muito útil já que estava usando temas para mostrar imagens.
Bom trabalho e continue ...!