<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();
}
0
Jordy Senssen 15 Дек 2015 в 17:28

3 ответа

Лучший ответ

Что вы можете сделать, так это создать свой собственный обработчик событий, поэтому в основном при загрузке html-страницы он запускает event, который будет перехвачен. Однако, если вы просто хотите дождаться загрузки изображений, вы можете использовать

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

Взгляните на эту ссылку "> Официальный способ попросить jQuery дождаться загрузки всех изображений перед выполнением чего-либо

Однако вот простой 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');
});
2
Community 23 Май 2017 в 12:15

Либо у вас должен быть какой-то ajax-y материал, загружающий контент, поэтому вы должны вызвать hide, когда это будет сделано. Или вы должны переместить скрипт вниз на странице, чтобы он работал после завершения загрузки страницы. Или используйте, например. JQuery, чтобы сказать вам, когда это будет сделано, например, загрузка.

$(function() {
//..dostuff
});
0
Christian Nielsen 15 Дек 2015 в 14:36

Ознакомьтесь с документацией для .load (). использование

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

Который я считаю, должен делать то, что вы хотите сделать.

0
Ieuan Stanley 15 Дек 2015 в 14:37