Guia jQuery

DevCast: Adoramos Ajax

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (25)  (0)

Neste DevCast veremos como a equipe de programação da DevMedia utilizou a técnica de Lazy Load, com jQuery, para otimizar o tempo de carregamento da página por meio de requisições Ajax.

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.

05:05 min

Sugestão de conteúdo prévio:

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.

Sugestão de conteúdo prévio:

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?