Menu icon Foundation
Orbit jumps around on load

I'm on chrome on OSX 10.9, and the orbit slider jumps around on a page load. You can see each individual slide for a split second with

  • bullets to the left of them before the javascript executes on the example page (and the same thing is happening for me locally).

    Is there a way to prevent this or have a more graceful loading image?

    I know this might be nitpicking, but I would think that a framework of this caliber might take it into consideration. For instance, take a look at GoDaddy's slider: http://www.godaddy.com/ - No jumping around there.

    Thanks in advance for any insight!

  • Orbit

    I'm on chrome on OSX 10.9, and the orbit slider jumps around on a page load. You can see each individual slide for a split second with

  • bullets to the left of them before the javascript executes on the example page (and the same thing is happening for me locally).

    Is there a way to prevent this or have a more graceful loading image?

    I know this might be nitpicking, but I would think that a framework of this caliber might take it into consideration. For instance, take a look at GoDaddy's slider: http://www.godaddy.com/ - No jumping around there.

    Thanks in advance for any insight!

  • Scott Anderson about 4 years ago

    I'm having the same issue. I'm using Firefox 25.0.1 and Safari 7.0.

    Clement almost 4 years ago

    I'm having the same problem in my rails app. I've found the following code on Stack Overflow but haven't gotten it working. Maybe I'm putting it in the wrong place though?

     <script type="text/javascript">
    jQuery(document).ready(function() {
    // hide orbit slider on load when user browses to page
    $('#featured.orbit').hide(); // hide div, may need to change id to match yours
    $('.loading').show(); // show the loading gif instead
    
    // then when the window has fully loaded
    $(window).bind('load', function() {
    $('.loading').hide(); // hide loading gif
    $('#featured.orbit').fadeIn('slow'); // show orbit
    });
    });
    </script>
    

    Clement almost 4 years ago

    Scott, I noticed you posted about this and a moderator closed the thread prematurely without giving the correct answer. I use the same markup as the example Zurb provide with the plugin and am still getting this behaviour. Are you including the code in a Rails app or just using straight HTML?

    Jon Ewing almost 4 years ago

    This is an issue with Orbit, not with any particular implementation of it.

    I took this screengrab of the Orbit page http://foundation.zurb.com/docs/components/orbit.html on the Foundation site:

    https://dl.dropboxusercontent.com/u/15887147/orbit-screengrab.jpg

    You can clearly see slide two loading simultaneously with slide one. The slider doesn't look right until both/all slides have finished loading.

    A not particularly great workaround for this is to set a fixed height:

      .home-slider {overflow:hidden;height:350px;}  
    
        <div class="row home-slider">
      <ul class="example-orbit" data-orbit>    
      <li>
      <img src="xx1.jpg" width="960" height="380" alt="xyz1" /></li>
      <li>
      <img src="xx2.jpg" width="960" height="380" alt="xyz2" /></li>
      </ul>
        </div>
    

    But of course you might need a different fixed height for each breakpoint, eg

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Large Displays: 1024px and up */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    @media only screen and (min-width: 64.063em) {
      .home-slider {overflow:hidden;height:415px;} 
    }
    

    I'm not saying this is a great solution.

    It would be better if it just worked right to begin with, obviously.

    Anyone got anything better?

    Clement almost 4 years ago

    I get around this with a fadeIn jquery function. Here it is in coffeescript:

     jQuery(document).ready ->
      jQuery("#orbit").hide(0).fadeIn(2000);
    

    Looks fairly nice so I'm happy with this solution.