CODEWITHSUNDEEP
jquerycssimagezurb-foundationorbit
Eric Filkins
Eric Filkins

Reputation: 329

Hide Orbit Slider Images until all are loaded

I'm using Foundation 5's Orbit slider and it's working fine, but when the page initially loads the images flash and then load in to the slider. Is there a way to hide the images until they are all loaded?

HAML

.row
  .medium-4.large-5.columns
    %ul.example-orbit{"data-orbit" => ""}
      - Cms::File.for_category('founder-carousel').each do |file|
        %li
          .slide= image_tag(file.file.url)
          .orbit-caption= file.description

Upvotes: 0

Views: 776

Answers (1)

JAre
JAre

Reputation: 4756

Orbit has onReady event. You can set default class for it with visibility:hidden(this wey it won't be visible but still will be part of the document flow) and change it to the visibility:visible when it's ready.

$("#myOrbit").on("ready.fndtn.orbit", function(event) {
  ... //your code here
});`

If it won't help you can add onload to the img tags with counter. Show Orbit when all of them loaded.

Upvotes: 1

Related Questions