隐藏轨道滑块图像直到全部加载

Question

我使用了Foundation 5的Orbit滑块，它工作正常，但是当页面最初加载图像时会闪烁，然后加载到滑块。有没有办法隐藏图像，直到它们全部加载？

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

Answer 1

Orbit有onReady事件。您可以使用visibility:hidden为它设置默认类（这将是不可见的，但仍然是文档流的一部分），并在准备就绪后将其更改为visibility:visible。

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

如果无效，您可以使用计数器将onload添加到img标记。当所有这些都加载时显示轨道。