jQuery 附加 html 在页面刷新时随机加载

Question

我遇到了这个问题：

我在我的网站上使用了 Alvaro Trigo 的 jquery plugin fullPage.js。插件脚本会自动在某些元素中插入 html 结构...在我的 html 中，我有：

<div class="section fp-auto-height-responsive" id="slider-section">
    <div class="slide" id="co-delame-section">
      <div class="slide-wrapper">
        ...
      </div>     
    </div>
  </div>

并且在加载页面时，javascript 会生成额外的 html 标记和 css，所以它看起来像：

<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">    
  <div class="fp-slides">
    <div class="fp-slidesContainer" style="width: 100%;">
      <div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
        <div class="fp-tableCell" style="height:638px;">      
          <div class="slide-wrapper">      
          </div>          
        </div>
      </div>
    </div>
  </div>              
</div>

我想为特定的页面分辨率附加更多幻灯片（幻灯片 class），这样当用户使用屏幕较小的移动设备时，将不会加载额外的幻灯片。

我用这个 javascript 代码来做：

$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
    $("#slider-section").append(data);
  });

还有问题...它在大约 50% 的页面加载时工作，问题是有时它会在 fullPage 生成结构后附加幻灯片，因此附加的幻灯片不在滑块结构中。 .. 像这样：

<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">    
  <div class="fp-slides">
    <div class="fp-slidesContainer" style="width: 100%;">
      <!-- the right place of a slide -->
      <div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
        <div class="fp-tableCell" style="height:638px;">      
          <div class="slide-wrapper">      
          </div>          
        </div>
      </div>
    </div>
  </div> 
  <!-- appended slides out of slider blocks --> 
  <div class="slide" id="jsme-partner">                        
  </div>                                     
  <div class="slide" id="vase-problemy">                                
  </div>
</div>

所以看起来 fullPage.js 脚本在附加幻灯片之前运行，但是在 html head 标记中我首先放置脚本来附加幻灯片，然后加载全页...

但真正奇怪的是有时加载正确，有时不正确。刷新时清除缓存有时会有所帮助，但我不能说删除缓存是否有任何模式。

您可以在 http://marketingo.cz/en/?stack-overflow#About 上查看它并通过缓存清除对其进行几次刷新以查看...

问题是 - 我怎样才能确保在 fullPage 插件修改代码之前附加 html 以便附加的滑块将在同一个容器中？

感谢您的帮助！ :)

Answer 1

简单。

在使用 $.get 回调追加幻灯片后只需初始化 fullPage.js。

$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
    $("#slider-section").append(data);

    //initialice fullPage.js here:
    $('#fullpage').fullpage();
});

jQuery 附加 html 在页面刷新时随机加载

jQuery append html loading randomly on page reresh

javascript

ajax

jquery

fullpage.js