I have a project where I want to show a specific div (about the

Question

0

Asked: May 26, 20262026-05-26T23:36:25+00:00 2026-05-26T23:36:25+00:00

I have a project where I want to show a specific div (about the

0

I have a project where I want to show a specific div (about the company) while a large fullscreen jQuery cycle is loading. I don’t want to show the loading div until the images are loaded. It works well locally, but when I upload it the page shows the about div (#index-about) long enough for the first image to load. If you use the cycle to move to the next slide the next image is not loaded yet. I deduced that it must not be preloading correctly.

Here’s my code. Thanks in advance! *EDIT: per request, here’s everything. Warning: it’s a ton of code. *
THE HTML:

    <!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>SGC</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/style.css?v=2">
  <!-- Lightbox CSS -->
  <script src="js/libs/modernizr-1.7.min.js"></script>

<!-- scripts concatenated and minified via ant build script-->
  <script src="js/libs/jquery-1.6.2.min.js"></script>
  <script src="js/libs/jquery.cycle.all.js"></script>

  <script src="js/libs/jquery.mousewheel.min.js"></script>
  <script src="js/libs/jquery.easing.1.3.js"></script>
  <script src="js/libs/jquery.address-1.4.min.js"></script>
  <script src="js/libs/jquery.waitforimages.js"></script>

  <script src="js/index2.js"></script>

  <script src="js/ajax.js"></script>


</head>

<body>

  <div id="container">

    <h1><a href="#/index" id="sgc-logo"><img src="images/SGC_logotype.png" alt="SGC"></a></h1>

    <header>
    <div id="nav-pulldown">
        <a href="javascript:void(0);" id="topbluelink"></a>
    </div>
    <div class="loading"></div>
        <div id="overlay_b1"></div>
        <div id="overlay_b2"></div>
        <div class="overlay" id="overlay-main">
            <ul id="nav-main" style="opacity:0;">
                <li><a href="#/about" id="btn-about" class="ajax"></a></li>
                <li><a href="#/work" id="btn-work" class="ajax"></a></li>
                <li><a href="#/contact" id="btn-contact"></a></li>
            </ul>
        </div>

    </header>
    <div id="main" role="main">

        <div id="loading_page" style="display:none; "><img src="images/ajax-loader-gray.gif"/></div>   
        <div id="main-content">

        </div><!-- eo main-content-->

<!-- ABOUT -->
        <div class="overlay" id="index-about">
        <div id="about-slider-container">
            <ul class="about-slider">

                <li class="about-statement" id="statement-1">
                <h2>What if the medium isn't the entire message?</h2>

                <p class="grey quote">"It's ideas that connect with consumers, build brands, and unleash the full potential of communications, both online and off."<br>
                    <span style="float:right;margin-right:20px;"> &mdash; <a href="#/index">SGC</a></span></p>

                </li>
                <!-- eo statement-1-->
            </ul>
        </div><!-- eo about-slider-container-->         
    </div>
<!-- / ABOUT -->

    </div>
    <footer>
    </footer>
  </div> <!-- eo #container -->

<!--<script>
$('#loading_page').css('margin-top',($(window).height()-64)/2);
</script>-->
  <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.2.min'>\x3C/script>")</script>
    -->




  <!-- end scripts-->


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg");</script>
  <![endif]-->


  <!-- Google Analytics 
    <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID 
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script> -->

</body>
</html>

THE JS:

    function ClickURLHash(o,i){
    var urlHash = o.attr("id");
    $.address.value(urlHash); 
}

function LoadURLHash(){
    var urlHash = location.hash;
    urlHash = urlHash.replace(/^#\//,"");
    var myHref = $(this).attr('href');

    if ((urlHash == "") || (urlHash == "index")){
        if ($('#topbluelink').hasClass('active')){ //DROPDOWN ON

            $('#overlay-main').animate({top:'100%'},600,'easeOutQuint');
            $("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
            $("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint',function(){
                $('#main-content').fadeTo(600,0,function(){
                    $('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
                        $.address.value("/");
                    };
                });
            $('#topbluelink').removeClass('active');    
            });

        }
        else if (!$('#topbluelink').hasClass('active')){ //DROPDOWN OFF
            $('#overlay_b2,#overlay_b1').css('top','100%');
            $('#overlay-main').animate({top:'100%'},600,'easeOutQuint',function(){
                $('#main-content').fadeTo(600,0,function(){
                    $('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
                        $.address.value("/");
                    };
                });
            $('#topbluelink').removeClass('active');    
            });
        }else{
            //new code

            //$('#loading_page').html('<img src="images/ajax-loader-black.gif"/>').css('display','');
            //$('#index-about').show();
            var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/ciroc_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
            var gotime = _images.length;

            $.each(_images,function(e) {
                $(new Image()).load(function() {

                    if (--gotime < 1)
                    {
                    $('#index-about').fadeOut(300, function(){
                        $('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');      
                        $('#main-content').css('opacity','0').load('pages/home.html',function(){
                        $('#main-content').animate({opacity:'1'},400);
                    });
                    });


                    }
                }).attr('src',this);
            });

            $('#topbluelink').removeClass('active');    
            $.address.value("/");
        }

    } else if ((urlHash == "work") || (urlHash == "contact")) {
        if ($('#topbluelink').hasClass('active')){

                $('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');     
                $('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
                    .animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
                        $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');

                $.address.value("/"+urlHash);
                $('#topbluelink').removeClass('active')
            });
        }
        else{
            //new cod2e

                $('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%

                $("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');


            $('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
            .animate({top:'0%',opacity:'1'},600,'easeOutQuint', 

                function (){                            
                    $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
                 });
                $.address.value("/"+urlHash);
            $('#topbluelink').removeClass('active');    

            }
            $('ul#nav-work').animate({opacity:'1'},600,'linear');
            $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');

            //KILL INDEX ABOUT
            var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/ciroc_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
            var gotime = _images.length;

            $.each(_images,function(e) {
                $(new Image()).load(function() {

                    if (--gotime < 1)
                    {
                        $('.overlay#index-about').css('display','none').hide().remove()
                        $('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');      
                        $('#main-content').css('opacity','0').load('pages/'+urlHash+'.html',function(){
                            $('#main-content').animate({opacity:'1'},400);
                        });     
                    }
                }).attr('src',this);
            });
    } else if (urlHash == "about"){
        if ($('#topbluelink').hasClass('active')){

                $('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');     
                $('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
                    .animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
                        $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');

                $.address.value("/"+urlHash);
                $('#topbluelink').removeClass('active')
            });
        }
        else{
            //new cod2e
                $('#index-about').hide();
                $('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%

                $("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
                $("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');


            $('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
            .animate({top:'0%',opacity:'1'},600,'easeOutQuint', 

                function (){                            
                    $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');

                 });
                $.address.value("/"+urlHash);
            $('#topbluelink').removeClass('active');    

            }
            $('ul#nav-work').animate({opacity:'1'},600,'linear');
            $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');

    } else {
        if ($('#topbluelink').hasClass('active')){
            $('#overlay-main').animate({top:'-100%'},600,function(){
                $("#overlay_b2").delay(200).animate({top:'-100%'},600,'easeInOutQuint');
                $("#overlay_b1").delay(400).animate({top:'-100%'},600,'easeInOutQuint');        

                $('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
                .animate({top:'0%'},600,'easeOutQuint'),function(){$.address.value("/"+urlHash)};
            });
                    $('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
            $('#topbluelink').removeClass('active');    


        }
        else{
            //IF THIS IS A PROJECT PAGE (not #/about, #/work, or #/contact) 
                $('#index-about').hide();

                $("#overlay_b1").animate({top:'0%'},600,'easeInOutQuint');
                $("#overlay_b2").delay(400).animate({top:'0%'},600,'easeInOutQuint');   

                $('#main-content').delay(800).animate({top:'0%'},600,'easeOutQuint', function (){


                    $('#loading_page').css('display','block');      

                    $('#main-content').load('pages/'+urlHash+'.html', function () {

                        $('#main-content').waitForImages(function()
                        {    

                            $('#loading_page').css('display','none');       

                            $("#overlay_b2").animate({top:'100%'},600,'easeInOutQuint');
                            $("#overlay_b1").delay(400).animate({top:'100%'},600,'easeInOutQuint');


                            $('#main-content').delay(800).show(600).css('top','-100%').animate({top:'0%'},600,'easeOutQuint', 

                            function (){


                                slide_top = ($('.detail-slide-content').css('height').replace('px','')-$('.detail-slide-body').css('height').replace('px',''))/2+200;

                                $(".detail-slide-body").css('top', slide_top+'px');

                                $('.detail-slide-content').animate({opacity:'1'},1000,'easeOutQuint');

                             }
                             //
                             );
                        });
                    });
                });
                $.address.value("/"+urlHash);
                $('#topbluelink').removeClass('active');    

        }
    }
}

$(document).ready(function(){
    $.address.externalChange(function(event) {
       LoadURLHash();      
    });  
}); 

$(window).load(function(){

        $('#main-content').animate({opacity:'1'},800,'easeInQuint');

});

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-26T23:36:26+00:00

Editorial Team

2026-05-26T23:36:26+00:00Added an answer on May 26, 2026 at 11:36 pm

Have you tried setting the cycle’s parent container style to display:none; visiblity:hidden;

And then once the page is loaded, $('div.container').show(); ?

That way, by default the HTML will be hidden and will not render on the screen until the page is loaded.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a project where I want to show a specific div (about the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply