wait with hiding div until its loaded

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>

I made a slider that works fine, but needs some time to load. I work with a platform that hides every element until you check a checkbox to show it. It shows the slide container, but doesn't show the content cause it has not loaded yet before hiding.

Is there a way to wait until the slider is loaded before hiding it?

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

And, How you are loading content? – Satpal Dec 15 '15 at 14:29 — Satpal, Dec 15 '15 at 14:29
just plain HTML, no ajax nothing – Jordy Senssen Dec 15 '15 at 14:50 — Jordy Senssen, Dec 15 '15 at 14:50

score 2 · Accepted Answer · edited May 23 '17 at 12:15

What you can do is create your own custom event handler, so basically when the html page is loaded it will fire an event off which will be caught. however if you just want to wait for the images to load you can use

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

take a look at this link Official way to ask jQuery wait for all images to load before executing something

However here is a simple jsFiddle to show my event handling example above

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);
});

Or you can do a custom event in jQuery like so

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');
});

score 0 · Answer 2 · answered Dec 15 '15 at 14:36

Either you must have some ajax-y stuff loading the content, so you should call hide when that is done. Or you should move the script down on the page so it runs after the page is done loading. Or use eg. jquery to tell you when it is done loading eg.

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

score 0 · Answer 3 · answered Dec 15 '15 at 14:37

0

Have a look at the documentation for .load(). Use

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

Which I believe should do what you want to do.

answered Dec 15 '15 at 14:37

Ieuan Stanley

1,248
8
20

This does work with the loading, but doesn't hide it after the loading part. – Jordy Senssen Dec 15 '15 at 14:41

wait with hiding div until its loaded

3 Answers3