Você não está conectado. Conecte-se ou registre-se

runMyCode.js - Executa se estiver visível...

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 runMyCode.js - Executa se estiver visível... em Sex Nov 07, 2014 11:04 pm

JScript

avatar
Membro elite

Olá!

Nota:
Este tópico destina-se a usuários com algum conhecimento em programação para que possam compreender melhor!

Apresento-lhes um recurso muito bom e que evita sobrecarregar uma página com execuções desnecessárias de códigos que ainda não "vemos" o resultado na tela!

Por exemplo: Temos um trecho HTML da página que precisamos fazer requisições aos perfis dos membros para se obter informações, mas se o trecho HTML não estiver visível na tela, então não temos a necessidade do código entrar em execução, até porque ainda "não estamos vendo" o elemento, correto?

Digamos que o elemento abaixo com ID chamado example contém uma requisição qualquer, mas para pouparmos recursos e acelerarmos a navegação, o ideal é que este elemento só disparasse o código da requisição se e somente se ele estivesse visível na tela, faz sentido não?

Vejam este exemplo:
Código:

<div id="example">
    <span style="display: none;">Esta frase só irá aparecer quando o elemento "example" estiver visível na tela!</span>
</div>

E abaixo a função que irá "mostrar" o elemento na tela:
Código:

/* Call your function using runMyCode() function. */
runMyCode("example", "MyFunction");

/* Your function to run only if the element #example is visible in view window! */
function MyFunction(){
    jQuery('#example').show();
}
Na função MyFunction() nós temos o trecho que mostra o elemento na tela usando o seguinte: jQuery('#example').show();

Porém, supomos que nesta função ainda temos várias requisições, com isso a navegação fica um pouco prejudicada se ela for executada assim que a página carregasse, entendem?

Agora percebam que no exemplo acima eu utilizo uma função que chama/executa o meu código da seguinte forma: runMyCode("example", "MyFunction");
Nela vemos dois parâmetros, o primeiro é o elemento do HTML e o segundo o nome da função que será "disparada" quando o elemento estiver visível na tela.

Abaixo temos o código completo que realiza o efeito:
Código:

/***********************************************************************
 * Only run your function if is visible in browser window (view port)!!!
 * Version: 1.23 - 2013/08/23
 * Made by: João Carlos (JScript Brasil at live dot com)
 * More in: www.punbb.forumeiros.com
 ***********************************************************************/
 
/***
* Function.....: runMyCode(elem, funcName)
* Description..: Function to fire event for 'scroll' to run your code/function...
* params.......:
*               elen     = element (not class!)
*               funcName = the name of your function!
* Return.......: Runs your function!
*/
function runMyCode(elem, funcName) {
    jQuery(window).on('scroll.' + funcName, __runMyCode(document.getElementById(elem), funcName));
}

/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
    var rect = elem.getBoundingClientRect();

    return (
    rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or jQuery(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or jQuery(window).width() */ );
}

/* Your function only runs if is visible in view port!!! */
function __runMyCode(elem, funcName) {
    return function() {
        /* Chech if the element is visible in view port! */
        if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
            jQuery(window).off('scroll.' + funcName);
            return funcName;
        }
    }
}
Eu vou optar por deixando de lado as explicações sobre o código acima para uma outra ocasião, mas ele é capaz de chamar/executar uma função sua apenas quando um determinado elemento HTML estiver visível na tela, com isso seu código entra em execução.

Se observarem bem, é dessa forma que o widget [Tópicos sendo vistos agora] funciona aqui...

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


Ver perfil do usuário http://jscript.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum