jquery - 隐藏轨道 slider 图像，直到所有图像都加载完毕

Question

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

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 标签中。当所有这些都加载时显示 Orbit。