2

I am displaying a Slideshow at the top of a website, using pretty-much standard code:

HTML:

  <body id="Top"
        onload="showSlides()">
    ...

    <div id="slides">
      <div id="slide1" class="slides fade"></div>
      <div id="slide2" class="slides fade"></div>
      <div id="slide3" class="slides fade"></div>
      <div id="slide4" class="slides fade"></div>
      <div id="slide5" class="slides fade"></div>
    </div>

    <div id="dotbox">
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
    </div>

    ...

  </body>

JS:

/* Start a slideshow. */
var slideIndex = 0;

function showSlides()
{
  var i;
  var slides = document.getElementsByClassName("slides");
  var dots = document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++)
  {
    slides[i].style.display = "none";  
  }

  slideIndex++;

  if (slideIndex > slides.length) 
  {
    slideIndex = 1
  }

  for (i = 0; i < dots.length; i++)
  {
    dots[i].className = dots[i].className.replace(" activedot", "");
  }

  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " activedot";

  // Change image every 3 seconds
  setTimeout(showSlides, 3000);
}

The slideshow comprises 5 slides; each slide fades for 3 seconds and then the next slide appears. Here's the relevant CSS that controls the fade, which is again pretty much standard:

CSS:

  /* Fading animation class */
  .fade
  {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
  }

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes fade
  {
    from 
    {
      opacity: .4;
    } 

    to
    {
      opacity: .1;
    }
  }

  /* Standard syntax */
  @keyframes fade
  {
    from 
    {
      opacity: .4;
      filter: alpha(opacity=40);    /* For IE8 and earlier */
    } 

    to
    {
      opacity: .1;
      filter: alpha(opacity=10);    /* For IE8 and earlier */
    }
  }

The slideshow works correctly when the JS function is stored internally within the HTML file.

However, when it is stored in an external JS file to which the HTML file is linked, the initial slides in the slideshow don't display correctly. Specifically, the problems are as follows:
1) The slideshow doesn't start with the 1st slide. The 3rd slide is the first to display, when the page first appears.
2) Then, the 1st slide appears. However, its fade completes and then the opacity increases to 1, before the next slide is displayed.
3) Thereafter, the slideshow plays correctly.

Thus, the problem is a transient one. Once steady-state is established, there is no problem.

I think this may be happening due to the time taken to load the external JS file.

How can I fix this problem?

SSteven
  • 733
  • 5
  • 17

1 Answers1

0

Put your code intialization in ready(function) like this

jQuery(document).ready(function(){
  //your code here
});

this will run after the JS file is completely loaded, hence no distraction in slide.

Joykal Infotech
  • 1,840
  • 3
  • 9
  • 17