holdready

/*http://stackoverflow.com/questions/23594794/loading-all-images-before-triggering-jquery-slideshow*/

by guest271314

HTML

<section id="data" style="display:none;">
    <div id="slidecontainer">
        <div class="slide"> <a href="#">
          <img alt="Chemistry-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/chemistry-1.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Hamilton" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Hamilton.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Platinum6" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum6.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Lectures-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lectures-1-2.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Lenses-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lenses-1-2.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Bromoil-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/bromoil-1.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Platinum2-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum2-1.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Schaefer2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Schaefer2.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Classroom-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/classroom-1-2.jpg" />
        </a>

        </div>
        <div class="slide"> <a href="#">
          <img alt="Dagbeq_web"...

JavaScript

$.holdReady(true);
var _html = $("#data")[0].innerHTML;
$("#gallery").load("/echo/html/", {
    html: _html
}, function (data, textStatus, jqxhr) {
    return ($("#gallery img").length === 11 && $.isReady ? $.when($.holdReady(false)).done(function () {
        alert($.isReady);
        $("#gallerycontainer")
        .prepend(jqxhr.state())
        // do stuff                   
    }) : alert(!is.Ready))
});