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

【问题标题】：Hide Orbit Slider Images until all are loaded隐藏轨道滑块图像，直到全部加载
【发布时间】：2014-05-11 04:40:53
【问题描述】：

我正在使用 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

【问题讨论】：

只是一个简单的猜测......隐藏图像或轨道的可见性......并使其在页面加载事件中可见，即当所有图像都加载完毕时

标签： jquery css image zurb-foundation orbit

【解决方案1】：

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

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

如果没有帮助，您可以将onload 添加到带有计数器的img 标记中。全部加载后显示 Orbit。

【讨论】：