Artigos HTML e CSS Adoramos Ajax
Voc� ainda n�o � assinante?

O tempo de carregamento das p�ginas web � fundamental para garantir uma boa experi�ncia para o usu�rio, por isso � importante reduzi-lo ao m�ximo. Uma das formas de melhorar esse aspecto � utilizar a t�cnica Lazy Load, que consiste de carregar um conte�do apenas quando ele � realmente requisitado pelo usu�rio. Neste DevCast conversamos com o time de desenvolvimento da DevMedia, que recentemente utilizou essa t�cnica e apresentou nesse v�deo o que foi necess�rio para isso.

Mais sobre jQuery

Consulta r�pida:


$(document).ready(function(){
    var loading = false;
    $(document).on("scroll",function(){
        ...
    });
});

Assim que o documento fica pronto, declaramos a vari�vel loading que servir� para impedir que sejam feitas multiplas requisi��es;

Em seguida, utilizando a fun��o on da jQuery, aguardamos pelo disparo do evento scroll no documento. 


$(document).on("scroll",function(){
    if(loading == false){
        if(isOnScreen($(".area"))){
            ...
        }
    }
});

Ap�s o disparo do evento de scroll no documento, verificamos se a requisi��o j� foi disparada atravez da vari�vel loading, e ent�o � verificado se o elemento com a classe area est� na tela, utilizando para isso a fun��o isOnScreen(). 


if(isOnScreen($(".area"))){
    loading = true;

    $.ajax({
        ...
    });
}

Caso o elemento esteja na tela, modificamos o valor da vari�vel loading para true e ent�o � iniciada a requisi��o dos dados atrav�s da fun��o $.ajax(). 


$.ajax({
    url: "conteudo.html",
    method: "GET"
}).done(function(res){
    $(".area").append(res);
});

Na requesi��o ajax, passamos a URL do conteudo e o m�todo da requisi��o (GET). Em seguida, utilizando o m�todo done, se a requis��o for um sucesso, o resultado � adicionado ao final do elemento com a classe area utilizando o a fun��o append(). 


function isOnScreen(element){
        var win = $(window);
        var screenTop = win.scrollTop();
        var screenBottom = screenTop + win.height();

        var elementTop = element.offset().top;
        var elementBottom = elementTop + element.height();

        return elementBottom > screenTop && elementTop < screenBottom;        
}

A fun��o isOnScreen verifica a posi��o relativa da tela com a posi��o do elemento.

As coordernadas do navegador iniciam no canto superior esquerdo da tela. Ent�o, para verificar se um elemento se encontra vis�vel na tela analisamos se a extremidade inferior do elemento � maior que o topo da p�gin, e se a extremidade superior do elemento � meior que a parte inferior da tela.

Conte�dos sobre Lazy Loading e Ajax