jquery - 一次加载多个幻灯片

Question

我在 Wordpress 中使用了一个名为 cyclone slider 的幻灯片插件。我只将网站构建为一个页面，因此所有页面以及幻灯片都堆叠有 display: none 和 visibility: hidden 并单击 z -index, visibility: visible and display: block.

该网站加载速度非常慢，因为有很多幻灯片，图像平均大小为 100kb，这是一个摄影师网站，他不想再优化图像了。

我如何使用 jQuery 仅在每个幻灯片的父级从 display: none 变为 display: block 或从visibility: hidden 可见。甚至使用 z-index。

最好的选择是，如果您单击另一个类别，它会开始加载该类别或部分幻灯片，然后停止加载您刚刚播放的幻灯片。

一些布局代码:

<div id="togglelinks" class="gallery-toggle">
<ul>
  <li class="people"><a class="switch" href="#" data-toggle="#people"><i>People</i></a></li>
  <li class="business"><a class="switch" href="#" data-toggle="#business"><i>People</i></a></li>
  <li class="school"><a class="switch" href="#" data-toggle="#school"><i>People</i></a></li>                                
</ul>
</div>
<div class="container">
  <div class="catagories">
    <div class="people cat-main">
      <div id="people" class="landing-cat" style="display:block; visibility:visible;">
        <div class="slider"><?php if( function_exists('cyclone_slider') ) cyclone_slider('people'); ?></div>
      </div>
      <div id="business" class="sub-cata hide" style="display:none; visibility:hidden;">
        <div class="slider"><?php if( function_exists('cyclone_slider') ) cyclone_slider('business'); ?></div>
      </div>
      <div id="school" class="sub-cata hide" style="display:none; visibility:hidden;">
        <div class="slider"><?php if( function_exists('cyclone_slider') ) cyclone_slider('school'); ?></div>
      </div>
    </div>
  </div>
</div>

Answer 1

一种选择是使用 JQuery LazyLoad plugin .

另一种更实际的方法是:

1. 在首次加载时，为所有图像创建标签。为加载的图像提供 src 属性，为稍后加载的图像提供不同属性中的 src。
2. 绑定(bind)事件以查看图像(滚动\点击)
3. 当事件触发时，找到下一张图像，获取备用 src 属性并将其插入 src 属性。