javascript - 在隐藏特定 DIV 和更新 url 之前预加载循环图像

标签 javascript jquery ajax jquery-cycle preload

我有一个项目，我想在加载大型全屏 jQuery 循环时显示特定的 div(关于公司)。在加载图像之前，我不想显示加载 div。它在本地运行良好，但是当我上传它时，页面显示的 about div (#index-about) 足够长以加载第一张图像。如果您使用循环移动到下一张幻灯片，则下一张图像尚未加载。我推断它一定没有正确预加载。

这是我的代码。提前致谢! *编辑:根据要求，这里是一切。警告:这是一大堆代码。 * 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>

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

});

最佳答案

您是否尝试过将循环的父容器样式设置为 display:none;可见性:隐藏；

然后一旦页面加载完毕，$('div.container').show(); ?

这样，默认情况下 HTML 将被隐藏，并且在页面加载之前不会呈现在屏幕上。

关于javascript - 在隐藏特定 DIV 和更新 url 之前预加载循环图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8158765/

上一篇：javascript - Rails 3 - 如何动态创建与参数关联的 html 元素 [ :id]?

下一篇：javascript - 间隔 500 毫秒切换 div 的显示

相关文章：

javascript 用标签包裹文本

javascript - 如何删除 javascript 打印函数中的 <a href link>

jquery - 有什么方法可以检查 Firebug 中关闭选项卡控制台错误吗？

javascript - Express 应用程序中未加载静态 Javascript 文件

jquery - 如何使用jquery更改元素的CSS

javascript - JS 定时器手动设置时间

jQuery数据绑定(bind)库或插件推荐

javascript - Ruby On Rails 应用程序与有关 AJAX 的 angularJS

javascript - 使用 Ajax 加载新内容

javascript - 使用 AngularJS 将数据库中出现的 HTML 渲染到 View 中

©2024 IT工具网  联系我们