0

não usei nenhum plugin para fazer uma simples transição entre divs, porque não era para ser nada complicado demais e nao queria sobrecarregar a página com vários plugins, mas no meu script o slider demora demais para começar a inicializar, existe uma forma de diminuir esse tempo? estou usando uma função setInterval mas não consegui fazer esse slider rodar mais rápido, segue o link da página com o slider do lado direito http://bit.ly/1gXSuO8

e abaixo o JS:

$(document).ready(function(){
  $(function(){
      $('div.fios-cobre div.slide:gt(0)').hide();
      setInterval(function(){
        $('div.fios-cobre div.slide:first-child').fadeOut()
           .next('.slide').fadeIn()
           .end().appendTo('div.fios-cobre');},
       5000);
  });
});

o HTML:

<div class="fios-cobre">

      <div class="slide">
         <div id="first-content">
            <div class="texto">
               <ul class="texto-balao">
                  <li>
                     <h1 class="text-rotate" id="text-1">Extinflan</h1>
                  </li>
                  <li class="separador"></li>
                  <li>São recomendados para instalações internas de baixa tensão (residenciais, comerciais)</li>
                  <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
               </ul>
            </div>
            <div class="imagem">
               <img src="{{ asset('assets/img/box-extinflan.png') }}" alt="" id="img-1">
               <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
            </div>
         </div>
         <!-- /#first-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="second-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">Fios e cabos de Cobre nú</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para instalações de linhas aéreas para transmissão de energia elétrica.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-fio-cobre-nu.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#second-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="third-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASFLEX</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para instalações em equipamentos elétricos, móveis ou fixos.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brasflex.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#third-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="fourth-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASCORD</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para ligações de aparelhos de iluminação e de baixa potência.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brascord.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#fourth-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="fifth-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASCORD 90 FLEX</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para ligações dos eletrodos em equipamentos de solda elétrica.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brasolda-90-flex.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#fifth-content -->
      </div>
      <!-- /.slide -->

   </div>
   <!-- /.fios-cobre -->
4
  • Resolveu aí? setinterval diz de quanto em quanto tempo, mas o seu problema é que demora pra começar correto?
    – Mattos
    11/03/2014 às 17:32
  • exatamente, esse script demora muito pra carregar
    – Leandro RR
    11/03/2014 às 17:40
  • Leandro, postei uma resposta, espero que ajude aí.
    – Mattos
    11/03/2014 às 18:05
  • vou verificar! thanks
    – Leandro RR
    11/03/2014 às 19:09

2 Respostas 2

1

No seu javascript, diminua o tempo da função setInterval

$(document).ready(function(){
$(function(){
  $('div.fios-cobre div.slide:gt(0)').hide();
  setInterval(function(){
    $('div.fios-cobre div.slide:first-child').fadeOut()
       .next('.slide').fadeIn()
       .end().appendTo('div.fios-cobre');},
   3000); // <-- Mude aqui. Agora está em 3 segundos.
});
});
1
  • meio que dá uma resolvida, mas não absolutamente, ele inicia mais rapido mas deixa a transição rapida demais também
    – Leandro RR
    11/03/2014 às 19:53
1

Nesse caso como demora pra carregar, ou seja, só quando o documento está pronto (ready) que a funçao é executada. Precisa saber realmente se é a função ou se é o conjunto todo, muitas funções antes ou muitos elementos dinâmicos podem causar essa lentidão.

Penso em alguns cenários:

  1. Verificar se o seu(s) componente(s) busca conteúdo em links externos.
  2. Tentar colocar o componente slide sozinho em uma página e ver se o problema persisti, assim você confirma se é o componente de fato ou outra coisa.
  3. Utilizar o document "Load" e não "Ready" - o que não é recomendado.
  4. A forma mais profissional seria analisar utilizando o ChromeDevTools (f12/cmd+shift+c no mac).

Utilizando TIMELINE do ChromeDevTools:

Gravando o carregamento inicial de uma página (page load):

  1. Abra sua página no chrome
  2. Abra o DevTools
  3. Na aba Timeline utilize Cmd+E(Mac) ou Ctrl+E (Win/Linux) para começar a gravar.
  4. Rapidamente aperte Cmd+R ou Ctrl+R para atualizar a página.
  5. Pare a gravação em seguida.

Você deve obter um resultado parecido com isso:

timeline com registros.

Dessa forma você consegue saber o que e quando foi carregado na página.

Já te adianto que fiz uma análise superficial e quando chega em 8s dentro da sua página tem um PICO de carregamento script principalmente com um arquivo niceScroll.js. Dá uma olhada lá.

Boa sorte!

1
  • é, esse nicescroll é um plugin que estiliza a scrollbar, ele captura o movimento do mouse. deve ser por isso o pico
    – Leandro RR
    11/03/2014 às 19:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .