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