Javascript consumindo processamento

[Jefferson William 0]

Olá pessoal, tudo bem?

 

Estou com um problema no meu Javascript. Estou no começo de um script voltado a técnica de Design Parallax, mas até o momento, por estar no início, não programei nada voltado ao mesmo.

 

Seguinte, a lista de código está consumindo muito tempo de processamento e fica muito lento - o que o torna um bug - e não sei o que fazer.

 

Eu usei muitas variáveis? Não estruturei corretamente o meu código?

 

Não sei o que fazer, se alguém puder me fazer essa gentileza, me ajude.

 

No navegador Chrome está tudo bem, porém, nos outros não, como por exemplo: Safari, Mozilla e IE.

 

Os arquivos podem ser encontrados no GitHub também: github.com/jeffersoncomdoisf/parallax

 

Segue os códigos:

 

 

Script

/*
* Criado por: Jefferson William
* Nome do Plugin: <name>
* Versão: 1.1.2
*/

(function($) {

   $.parallaxMouse = function(settings) {
       var config = {
           area: '.parallax',
           layer: 'img',
           fx: 'fade',
           delay: 3000,
           fxSpeed: 500,
           move: true,
           marginHoriz: 0,
           marginVert: 0,
           align: 'center'
       };

       if(settings) { $.extend(config, settings); }

       // Variáveis globais
       var mouse = {},
           area = {},
           img = {},
           i = 0;

       // Inicializando as variáveis
       area = typeof( $(config.area)) == 'object' && $(config.area).offset() != null ?
           $(config.area) :
           alert("Objeto area não encontrado.");
       area.width = area.width();
       area.height = area.height();
       area.posx = area.offset().left;
       area.posy = area.offset().top;

       img = $(config.layer);
       img.count = img.length;

       // Centralizar imagens
       function centralize_imgs() {
           img.each(function() {
               $(this).css({
                   left: Math.round( ( area.width - $(this).width()) / 2),
                   top: Math.round( ( area.height - $(this).height()) / 2)
               });
           });
       }

       // Mapeando a área de movimento do mouse
       var map_area = function() {
           // Obtendo as posições da área
           area.offsetTop      = area.posy;
           area.offsetRight    = area.posx + area.width;
           area.offsetBottom   = area.posy + area.height;
           area.offsetLeft     = area.posx;

           var horizontal  = (mouse.posx >= area.offsetLeft && mouse.posx <= area.offsetRight) ? true : false;
           var vertical    = (mouse.posy >= area.offsetTop && mouse.posy <= area.offsetBottom) ? true : false;

           // Verificando se o mouse está sobre a área
           return horizontal && vertical ? true : false;
       };

       // Configurações do slide show
       var slideshow = {
           init: function() {
               // O que fazer antes de começar o slide show
               img.hide();
               img.eq(0).show();

               slideshow.run();
           },
           run: function() {
               // Rodando slide show
               if('fade' === config.fx) {
                   setInterval( function(){
                       img.eq( i ).fadeOut(config.fxSpeed);
                       i = (i + 1 == img.count) ? 0 : i + 1;
                       img.eq( i ).fadeIn(config.fxSpeed);
                   }, config.delay );
               }
           }
       };

       // Configurações referente ao mover da layer
       var move = {
           init: function() {
               var validate_direction;
               // Se for mover a layer mesmo não espeficicando a direção
               if(config.move != false) {
                   validate_direction = true;
               } else {
                   // Se não for mover a layer
                   // Zerar variáveis de movimento
                   img.move_posx = 0;
                   img.move_posy = 0;
                   validate_direction = false;
               }
               return { value: validate_direction };
           }
       };

       move.init();

       if(move.init().value && config.align == 'center') {
           // Centralizando imagens
           centralize_imgs();
       }

       slideshow.init();

       return $(document).mousemove( function(e) {
           // Pegando as posições do mouse e jogando na variável global
           mouse.posx = e.pageX;
           mouse.posy = e.pageY;

           // Se o mouse estiver dentro da área que foi mapeada
           if( map_area() ) {
               // Posição do mouse dentro da área
               area.mouse_posx = mouse.posx - area.posx;
               area.mouse_posy = mouse.posy - area.posy;

               // Pegar as porcentagens das posições do mouse dentro da área
               area.mouse_posx_percent = Math.round(area.mouse_posx / area.width * 100);
               area.mouse_posy_percent = Math.round(area.mouse_posy / area.width * 100);

               // Mover a sobra da imagem até encostar na borda da área de movimento do mouse
               img.each( function() {
                   img.width = $(this).width();
                   img.height = $(this).height();
                   img.posx = $(this).offset().left;
                   img.posy = $(this).offset().top;
                   img.cssLeft = parseInt( $(this).css('left'));
                   img.cssTop = parseInt( $(this).css('top'));

                   // Configurações para mover o objeto
                   if( move.init().value ) {
                       // Encontrar a área de sobra da imagem
                       img.width_out = (area.width - img.width) + config.marginHoriz;
                       img.height_out = (area.height - img.height) + config.marginVert;

                       // Quantos % vou mover a imagem de acordo com o movimento do mouse
                       img.move_posx = img.width_out * (area.mouse_posx_percent / 100);
                       img.move_posy = img.height_out * (area.mouse_posy_percent / 50);

                       // Mover a imagem até a posição do mouse levemente
                       $(this).animate({
                           left: img.move_posx + 'px',
                           top: img.move_posy + 'px',
                       }, {
                           duration: 50,
                           queue: false,
                           easing: 'linear'
                       });
                   }
               });
           }
       });
   };
})(jQuery);

 

Eu chamo o plugin desta forma:

$.parallaxMouse({
 area: '.parallax .figure',
 layer: '.parallax-img'
});

 

A estrutura no HTML acabei deixando assim:

<div id="header" class="internal">
	<div id="mbox" class="parallax">
		<div class="figure">
			<img src="images/mbox_1.jpg" class="parallax-img" style="width: 1166px; height: 612px;" />
			<img src="images/mbox_2.jpg" class="parallax-img" style="width: 1168px; height: 601px;" />
			<img src="images/mbox_3.jpg" class="parallax-img" style="width: 1165px; height: 616px;" />
		</div><!--  -->
		<img class="mask" src="images/background_mbox_min.png" alt="" />
		<img src="images/text_mbox_1.png" class="parallax-text" style="width: 660px; height: 300px;" />
		<img src="images/text_mbox_2.png" class="parallax-text" style="width: 660px; height: 300px;" />
		<img src="images/text_mbox_3.png" class="parallax-text" style="width: 660px; height: 300px;" />
	</div> <!-- #mbox -->
</div><!-- #header -->

 

Agradeço desde já!

[Bruno Augusto 417]

Não me parece um JavaScript muito problemático.

 

Mas é fato de qualquer JavaScript roda N vezes melhor no Chrome. Se está muito pesado, experimente outros scripts de Parallax.

[Jefferson William 0]

Eu tentei aplicar o jparallax que se encontra no link http://stephband.info/jparallax/ juntamente com o Plugin Cycle (mesclei os dois), mas não retornou um resultado esperado, ou seja, não consegui aproveitar os slides do Cycle e ao mesmo tempo incluir o efeito do jparallax. Isso me fez buscar por uma solução própria, criar um plugin com efeitos de mover a imagem de acordo com o mouse para cada slide retornado/atual.

 

O script que passei pra vocês não está com problemas, ele funciona, mas eu entendo como um bug essa lentidão que o script gera, onde o erro pode ser em um processamento infinito por causa do:

 

JS

       return $(document).mousemove( function(e) {

 

ou por causa do uso das variáveis globais (mesmo não podendo afirmar isso):

 

JS

       // Variáveis globais
       var mouse = {},
           area = {},
           img = {},
           i = 0;

 

O que vocês acham?

[William Bruno 1501]

isso aqui:

 

 return $(document).mousemove( function(e) {

está incorreto mesmo amigo.

 

Não é assim que se trabalha com eventos dentro de um plugin jQuery.

Pegue um código de algum outro plugin grande e dê uma estudada, você vai ver que bacana, e quão performático pode ser.

[Jefferson William 0]

Ok, vou fazer isso, mas gostaria que este post não fosse fechado, porque quando encontrar a solução eu tornarei a postar aqui. Hoje mesmo de noite irei pesquisar e dar uma olhada no código que encontrar, e logo após isso irei postar alguma solução ou dúvida. Acho que seria interessante de uma forma geral.

 

Grato!

 

A noite estou de volta rs.

[MafnGamer 13]

Usa um minifier :thumbsup:

[Jefferson William 0]

É verdade, vou fazer um teste. Obrigado pela dica.

 

Poxa, fiz um Minifier no JS mas mesmo assim não deu e não tive sinal de melhoras nos browsers, somente no Chrome roda direitinho, no resto, permanece com lentidão.

[Bruno Augusto 417]

Usar um minifier num código dificilmente vai melhorar a performance dele.

 

Vai sim diminuir o tempo que o script leva para ser baixado no cliente, mas uma vez baixado, se o código tiver "vazamentos" de performance, este assim o continuará.

[Jefferson William 0]

Fiz algumas modificações no JS e logo mais eu posto aqui pra vocês darem uma opinião.

[MafnGamer 13]

E é mesmo bruno nem tinha pensado nisso. :thumbsup: