decrease jQuery slider time

Question

decrease jQuery slider time

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I did not use any plugin to make a simple transition between divs, because it was not to be too complicated and I did not want to overload the page with several plugins, but in my script the slider takes too long to start initializing, decrease this time? I'm using a setInterval function but I could not make this slider run faster, follow the link on the page with the slider on the right side link

and below the 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);
  });
});

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 -->

javascript html jquery

asked by anonymous 11.03.2014 / 16:18

2 answers

Replace static text in several files Declare variable within my cshtml

score 1 · Answer 1

In your javascript, decrease the time of the function 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.
});
});

score 1 · Answer 2

In this case, how long does it take to load, that is, only when the document is ready (ready) that the function is executed. You need to really know if it's the function or if it's the whole set, many functions before or many dynamic elements can cause this slowness.

I think of some scenarios:

Check that your component (s) fetches content from external links.

Try to put the slide component alone on a page and see if the problem persisted, so you can confirm whether it's the fact component or something else.

Use the document "Load" instead of "Ready" - which is not recommended.

The most professional way would be to analyze using ChromeDevTools (f12 / cmd + shift + c on mac).

Using TIMELINE from ChromeDevTools:

Saving the initial load of a page (page load):

Open your page in chrome

Open DevTools

On the Timeline tab, use Cmd + E (Mac) or Ctrl + E (Win / Linux) to start recording.

Quickly press Cmd + R or Ctrl + R to refresh the page.

Stop recording.

You should get a result like this:

This way you can know what and when it was loaded on the page.

I've already made a superficial analysis and when it arrives at 8s inside your page it has a PICO load script mainly with a niceScroll.js file. Take a look there.

Good luck!