Question

<section class="slideshow" id="slideshow">	
      <div id="slides">
        <div class="slides-container">
        <div class="slide">
          <img src="img/people.jpeg" alt="Cinelli">
          </div>
          <div class="slide">
          <img src="img/surly.jpeg" width="1024" height="682" alt="Surly">
          </div>
          <div class="slide">
          <img src="img/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
          </div>
          <div class="slide">
          <img src="img/affinity.jpeg" width="1024" height="685" alt="Affinity">
          </div>
        </div>
    
        <nav class="slides-navigation">
          <a href="#" class="next"></a>
          <a href="#" class="prev"></a>
        </nav>
      </div>
   </section>

我做了一个工作正常的滑块，但需要一些时间来加载。我使用一个隐藏每个元素的平台，直到您选中一个复选框来显示它。它显示了幻灯片容器，但没有显示内容，因为它在隐藏之前尚未加载。

有没有办法等到滑块加载后再隐藏它？

if ($('#slideshow_checkbox').prop('checked')) {
    $('#slideshow').show();
} else {
    $('#slideshow').hide();
}

Answer 1

你可以做的是创建你自己的自定义事件处理程序，所以基本上当加载html页面时，它将触发event关闭，将被捕获。但是，如果您只想等待加载图像，可以使用

$(window).on("load", function() {
    // insert code here
}

查看此链接Official way to ask jQuery wait for all images to load before executing something

但是这里有一个简单的jsFiddle来显示上面的事件处理示例

jsFiddle：https://jsfiddle.net/7rzkaLg6/

的jQuery

function myEventHandler(e) {
  $('.content').html("Hello there");
}

$(function() {
  var myEvent = new CustomEvent("myEventName");
  document.addEventListener("myEventName", myEventHandler, false);
  document.dispatchEvent(myEvent);
});

或者您可以在jQuery中执行自定义事件

jsFiddle：https://jsfiddle.net/7rzkaLg6/2/

$(function() {
  // Put this piece of code inside of your "main" html file and it will catch the event
  $('.content-wrapper').on('content:loaded', function() {
    $(this).show();
  });

    // In your HTML page that you load, fire this in the $(function(){}) code
  $('.content').trigger('content:loaded');
});

Answer 2

你必须有一些加载内容的ajax-y东西，所以你应该在完成后调用hide。或者您应该在页面上向下移动脚本，以便在页面加载完成后运行。或者使用例如。 jquery告诉你何时完成加载，例如。

$(function() {
//..dostuff
});

Answer 3

查看.load()的文档。使用

$("#whateveryourcontentis").load(function(){
    //do whatever hiding/unhiding you need to do when the content loads
});

我认为应该做你想做的事。

等待隐藏div直到它被加载

3 个答案: