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