1

http://www.djdenner.ca/index_new

这仅仅是 iPad 页面过多的问题吗（iPad 4th gen with Retina display）

当我打开页面时，一半的时间它崩溃了。

我已经采取措施减少动画的数量、数学计算的数量等，但它仍然做同样的事情。

我大部分时间都在使用动画、淡入淡出和淡出。我开始使用传输插件切换它以尽可能利用硬件加速，但它仍然会使 ipad 崩溃。

不过在桌面浏览器上效果很好。

JS代码：

    $(document).ready(function(){
    window.animationstage = 0;
    setTimeout("index_window_resize()",500);

    load_1();

    $(window).resize(function() {
        alert('resize bind action');
        index_window_resize();
    });

    $(window).bind('orientationchange', function(event) {
        alert('orientation bind action');
        index_window_resize();
    });

    $('.index_menu_container').each(function(){
        $(this).hover(
            function(){
                $(this).children('.index_menu_bg_1').stop().fadeTo(300, 1.0);
                $(this).children('.index_menu_bg_2').stop().fadeTo(300, 0.9);
                return false;
            }, 
            function(){
                $(this).children('.index_menu_bg_1').stop().fadeTo(300, 0);
                $(this).children('.index_menu_bg_2').stop().fadeTo(300, 0.5);
                return false;
            }
        );
    });


    $('a').on('click touchend', function(e) {
        $(this).unbind('mouseenter').unbind('mouseleave');
        $(this).off('hover');
        var link = $(this).attr('href');
        window.location = link;
    });

    $('.index_menu_container').on('click touchend', function(e) {
        $(this).unbind('mouseenter').unbind('mouseleave');
        $(this).off('hover');
    });

});


function load_1() {
    window.animationstage = 1;
    index_window_resize();
    $('#logo_large').delay(500).transition({opacity: 1},3000);
    $('#logo_large_shine').delay(2500).transition({opacity: 1},1000).delay(300).fadeTo(1000, 0.0, function(){
        if(window.windoww>=768) {
            load_2(); // trigger phase 2 of animation
        } else {
            //alert(window.windoww);
            $('#logo_large').fadeTo(1000,0.0, function(){
                window.location = "http://www.djdenner.ca/listings";
            });
        }
    // after animation stuff is done... prepare the menu DIVs
    });
    $('#logo_shine_silver').delay(2800).transition({opacity: 0},1000);


}   

function load_2() {
    window.animationstage = 2;
    // by now logo must have loaded... run the index_misc_images_preload loading mechanism
    $.ajax({
        url: "/images_preload.php",
    }).done(function ( data ) {
        $('#index_misc_images_preload').html(data);
    });


    $('#logo_large_shine').remove();
    // calculate logo width
    var logotopw = 460; // default width
    var logotoph = 113; // default height
    var top_leather_top = 160;
    var logo_large_top = 30;
    if(window.windoww<520) {
        var logoratio = logotoph/logotopw;
        logotopw = window.logow;
        logotoph = window.logoh;
        top_leather_top = logotoph+25;
        logo_large_top = 10;
        $('#top_logo_shadow').hide();
    }
    $('#index_contact_info').delay(1000).transition({opacity: 0},1000);
    $('#logo_large').delay(500).transition({width:logotopw+'px', height:logotoph+'px', marginTop:logo_large_top+'px'},2000);
    $('#top_leather').delay(1000).transition({top:'0px', height:top_leather_top+'px'}, 2000,'easeOutQuint', function(){
        load_3();
    });
}

function load_3() {
    window.animationstage = 3;
    // position slideshow #index_slideshow_container
    index_window_resize(); // run this again just so the width & height of the slideshow etc. is set right. 

    $('#index_menu').slideDown(600);
    $('#index_slideshow_container').fadeTo(1000,1.0);
        $('#index_slideshow_container div:eq(0)').fadeTo(1000,1.0, function(){
            load_4();
        }); // load up first one by default.
}

function load_4() { 
    window.animationstage = 4;
    index_window_resize();
}

function index_window_resize() {
    // find 60% mark from top
    window.windowh = $(window).height();
    window.windoww = $(window).width();

    //alert(window.windoww+' X '+window.windowh);

    $('#full_container').height(window.windowh);

    window.logow = $('#logo_large').width();
    window.logoh = $('#logo_large').height();

    window.ratiow = window.logow/940;
    window.ratioh = window.logoh/232;

    window.top50 = window.windowh*0.5-(window.logoh/2);

    window.logoleft = window.windowh-940;

    if(window.animationstage<2) {
        // if the animation stage is below 2, then we adjust the top margin of the large logo. 
        // if it's after that, that's after the logos' been moved to the top so we skip it. 
        $('#logo_large').css({"margin-top": window.top50+'px'});
    }

    // now deal with the shine.. it's 173 X 173 wide by default, unless on mobile. Need to use percentage. 
    var shineposleft = 785; // relative position default
    var shinepostop = 17; // relative position default

    shineposleft = window.ratiow * shineposleft;
    shinepostop = window.ratioh * shinepostop;

    var shinesize = ratiow * 173;

    $('#logo_large_shine').css({"width": shinesize+'px', "height" : shinesize+'px', "top":'-'+shinepostop+'px', "left":shineposleft+'px' });

    // adjust the width & height of the logo on top. 
    if(window.animationstage>2) {
        if(window.windoww<520 && window.windoww<window.windowh) {
            // smaller screen.. adjust width of logo to 80% of the window. 
            $('#logo_large').width(window.windoww*0.8).height(window.windoww*0.8*232/940).css({"marginTop":'15px'});
            var top_leather_h = $('#logo_large').height()+25;
            var index_menuw = window.windoww*0.8;
            $('#top_leather').height(top_leather_h);
            $('#top_logo_shadow').hide();
            $('#index_menu').css({"width":index_menuw+'px', "marginTop" : 10});

            var menu_containerratio = 60/400;
            $('.index_menu_container').css({"width":index_menuw+'px', "height":(menu_containerratio*index_menuw)+'px'});

            // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
            index_slideshow_container_height = window.windowh-$('#top_leather').height();
            $('#index_slideshow_base img').css({'width':'auto', 'height':'100%'});

        } else if(window.windoww<768) {

            // smaller screen.. adjust width of logo to 80% of the window. 
            $('#logo_large').width(window.windoww*0.4).height(window.windoww*0.4*232/940).css({"marginTop":'15px'});
            var top_leather_h = $('#logo_large').height()+25;
            $('#top_leather').height(top_leather_h);
            $('#top_logo_shadow').hide();
            $('#index_menu').css({"width":window.windoww*0.4, "marginTop" : $('#logo_large').height()*0.3});

            var menu_containerratio = 60/400;
            $('.index_menu_container').css({"width":window.windoww*0.4, "height":menu_containerratio*window.windoww*0.4});

            // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
            index_slideshow_container_height = window.windowh-$('#top_leather').height();
            $('#index_slideshow_base img').css({'width':'auto', 'height':'100%'});

        } else {
            // full screen
            $('#logo_large').css({"marginTop":'30px', 'width':'460px', 'height':'113px'});
            $('#top_leather').height(160);
            $('#top_logo_shadow').show();
            $('#index_menu').css({"width":'400px', "marginTop" : '80px'});
            $('.index_menu_container').css({"width":'400px', "height":'60px'});

            // see if the screen ratio is vertical or horizontal...
            // ratio is 2400 X 1140
            var index_slideshow_container_ratio = 1140/2400;

            // after leather bar & top logo has been adjusted.. slideshow height adjuster

            var index_slideshow_container_height = window.windowh-$('#top_leather').height();

            if (index_slideshow_container_height/window.windoww>index_slideshow_container_ratio) {
                // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
                index_slideshow_container_height = window.windowh-$('#top_leather').height();

                var index_slide_imgh = index_slideshow_container_height;
                var index_slide_imgw = index_slide_imgh/1140*2400;
                var index_slide_left = (index_slide_imgw-window.windoww)/2;
                var index_slide_top = 0;
            } else {

                // image is more panoramic (wider) than provided space compared to the height. set height as base. 
                var index_slide_imgw = window.windoww;
                var index_slide_imgh = index_slide_imgw/2400*1140;
                var index_slide_top = 0; // regardless of how tall the image is, start at top so we dont cut heads off.
                var index_slide_left = 0;
            }

            $('#index_slideshow_container').width(window.windoww).height(index_slideshow_container_height).css('top', $('#top_leather').height()+'px');
            $('.index_slide').width(window.windoww).height(index_slideshow_container_height);

            $('.index_slideshow_bg').css({width:index_slide_imgw+'px', height:index_slide_imgh+'px', left:-index_slide_left+'px', top:-index_slide_top+'px'}); 

        }

        // index_slide elements are set.. now to configure the width/height of the image within so as to not break ratio
        // 2400/1140 is the ratio of the images. 
        var index_slide_img_ratio = 2400/1140;
        var index_slide_ratio = window.windoww/index_slideshow_container_height;

        if(index_slide_img_ratio<=index_slide_ratio) {

        } else {
            // image is more portrait (taller) than provided space compared to the width. set width as base. 

        }
    }

    if(window.animationstage>3) {
        var index_slideshoww = ((index_slide_imgw-400)/2)*0.6; // from full width, deduct the menubar width (400), split in half.. then 60% of remaining gap on left. 
        $('.index_slideshow').width(index_slideshoww); // set the width first. 

        $('.index_slideshow').each(function(){
            var index_slideshowh = $(this).find('p').height(); // set height of each item based on the paragraph height + 60 pixels gap
            $(this).height(index_slideshowh);
            $(this).css({'opacity':0, 'left':'30px', 'top':(index_slideshow_container_height-index_slideshowh-120)+'px'});
            // for some reason 30px from bottom doesn't work, presumably because it's before the fathering DIV loads and registers height at 0px at the moment of running.
            // So we set margin from top. Deduct the height of the element from total height and then another 120 pixels for gaps etc. to get final margin from top.

        });
    }


}

$(function() {

    var degree = 0,
        timer;

    function rotate() {    
        $('#logo_large_shine').css({ transform: 'rotate(' + degree + 'deg)'});
        // timeout increase degrees:
        timer = setTimeout(function() {
            ++degree;
            rotate(); // loop it
        },20);
    }

    rotate();    // run it!

});

HTML DOM：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>West Vancouver's Fine Homes & Luxury Real Estate - D.J.Denner Real Estate</title>

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/skeleton.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.djdenner.ca/css/base.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/common.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/common_mobile.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.djdenner.ca/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.djdenner.ca/css/layout.css?hash=206" />

<link rel="stylesheet" type="text/css" media="all" href="http://www.djdenner.ca/css/fancybox_iframe.css" />

<link rel="stylesheet" type="text/css" media="all" href="http://www.djdenner.ca/css/index_new.css" />

<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="http://demo.brixwork.com/master/css/jquery.fancybox-buttons.css" />

<script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery-1.10.2.js"></script><script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery-ui-1.10.3.js"></script>
<script type="text/javascript" src="http://www.djdenner.ca/js/modernizr.js"></script>
<script type="text/javascript" src="http://www.djdenner.ca/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/hash.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/common.js"></script>
<script type="text/javascript" src="http://www.djdenner.ca/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery.cycle.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery.timer.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="http://demo.brixwork.com/master/js/iepngfix_tilebg.js"></script>

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>




                    <script type="text/javascript" src="http://www.djdenner.ca/js/index_new.js?rand=706"></script>
                    <script type="text/javascript" src="http://www.djdenner.ca/js/index_slides_new.js?rand=353"></script>
<script type="text/javascript">
function tfSeFQsfNMcdzdK()
{
/* Munged addy code - YOU CAN EDIT COMMENT THIS TAG BETWEEN THE TWO STARS */ 
var jfobOhWAXphYDrY=["x64","106","x40","x64","106","100","x65","110","110","101","x72","46","x63","97"];
var IAucJqkicTDjNlW=['?','s','u','b','j','e','c','t','=','&','c','c','=','&','b','c','c','=','&','b','o','d','y','='];
var hFcurDruaXqPhsD=["100","106","64","x64","x6a","x64","101","x6e","x6e","x65","114","x2e","x63","x61"];
document.write("<a href=\"&#x6d;&#97;&#000105;&#000108;&#x74;&#000111;&#58;");
for (i=0; i<jfobOhWAXphYDrY.length; i++) document.write('&#'+jfobOhWAXphYDrY[i]+';');
for (i=0; i<IAucJqkicTDjNlW.length; i++) document.write(IAucJqkicTDjNlW[i]);
document.write('" style="" class="" id="">');
for (i=0; i<hFcurDruaXqPhsD.length; i++) document.write('&#'+hFcurDruaXqPhsD[i]+';');
document.write('</a>');
/* Munged addy code - YOU CAN EDIT COMMENT THIS TAG BETWEEN THE TWO STARS */
}
</script>




</head>


<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div id="full_container"><!-- opening for homepage -->
<div id="index_slideshow_container">
    <div class="index_slide" id="index_slideshow_base">
        <img src="http://www.djdenner.ca/images/index_slideshow_base.jpg" class="index_slideshow_bg" />

        <div class="index_slideshow light_smokescreen" id="index_slideshow_0">
                        <p>Properties short intro that will show on index page. Edit under Pages -> Properties for Sale -> Short Excerpt field below content.</p>
        </div>
        <div class="index_slideshow light_smokescreen" id="index_slideshow_1">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat bibendum commodo. Aliquam ultricies, quam id faucibus tempus, eros lorem tempor augue, ultricies tempor justo mauris sit amet enim. Nulla tellus lectus, feugiat et nisi aliquam, adipiscing accumsan lacus. Proin varius venenatis volutpat. Phasellus elit tellus, pulvinar sit amet adipiscing non, fermentum vel nisi. Vestibulum sed tellus sem.</p>
        </div>
        <div class="index_slideshow light_smokescreen" id="index_slideshow_2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat bibendum commodo. Aliquam ultricies, quam id faucibus tempus, eros lorem tempor augue, ultricies tempor justo mauris sit amet enim. Nulla tellus lectus, feugiat et nisi aliquam, adipiscing accumsan lacus. Proin varius venenatis volutpat. Phasellus elit tellus, pulvinar sit amet adipiscing non, fermentum vel nisi. Vestibulum sed tellus sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat bibendum commodo. Aliquam ultricies, quam id faucibus tempus, eros lorem tempor augue, ultricies tempor justo mauris sit amet enim. Nulla tellus lectus, feugiat et nisi aliquam, adipiscing accumsan lacus. Proin varius venenatis volutpat. Phasellus elit tellus, pulvinar sit amet adipiscing non, fermentum vel nisi. Vestibulum sed tellus sem.</p>
        </div>
        <div class="index_slideshow light_smokescreen" id="index_slideshow_3">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat bibendum commodo. Aliquam ultricies, quam id faucibus tempus, eros lorem tempor augue, ultricies tempor justo mauris sit amet enim. Nulla tellus lectus, feugiat et nisi aliquam, adipiscing accumsan lacus. Proin varius venenatis volutpat. Phasellus elit tellus, pulvinar sit amet adipiscing non, fermentum vel nisi. Vestibulum sed tellus sem.</p>
        </div>

    </div>


</div>


<div id="top_leather">
    <div id="top_logo_shadow">
    </div>
</div>

<div id="logo_large">
    <img src="http://www.djdenner.ca/images/logo_large.png" id="logo_large_image" />
    <div id="logo_large_shine">
        <img src="http://www.djdenner.ca/images/shine_gold.png" id="logo_shine_gold" />
        <img src="http://www.djdenner.ca/images/shine_silver.png" id="logo_shine_silver" />
    </div>
</div>

<div id="index_menu">
    <div id="index_menu_0" class="index_menu_container">
        <img src="http://www.djdenner.ca/images/index_menu_bg_0.png" class="index_menu_bg_0" />
        <img src="http://www.djdenner.ca/images/index_menu_bg_1.png" class="index_menu_bg_1" />
        <img src="http://www.djdenner.ca/images/index_menu_0.png" class="index_menu_bg_2" />
        <a href="http://www.djdenner.ca/listings"><img src="http://www.djdenner.ca/images/blank.gif" width="100%" height="100%" /></a>
    </div>
    <div id="index_menu_1" class="index_menu_container">
        <img src="http://www.djdenner.ca/images/index_menu_bg_0.png" class="index_menu_bg_0" />
        <img src="http://www.djdenner.ca/images/index_menu_bg_1.png" class="index_menu_bg_1" />
        <img src="http://www.djdenner.ca/images/index_menu_1.png" class="index_menu_bg_2" />
        <a href="http://www.djdenner.ca/marketing"><img src="http://www.djdenner.ca/images/blank.gif" width="100%" height="100%" /></a>
    </div>
    <div id="index_menu_2" class="index_menu_container">
        <img src="http://www.djdenner.ca/images/index_menu_bg_0.png" class="index_menu_bg_0" />
        <img src="http://www.djdenner.ca/images/index_menu_bg_1.png" class="index_menu_bg_1" />
        <img src="http://www.djdenner.ca/images/index_menu_2.png" class="index_menu_bg_2" />
        <a href="http://www.djdenner.ca/community"><img src="http://www.djdenner.ca/images/blank.gif" width="100%" height="100%" /></a>
    </div>
    <div id="index_menu_3" class="index_menu_container">
        <img src="http://www.djdenner.ca/images/index_menu_bg_0.png" class="index_menu_bg_0" />
        <img src="http://www.djdenner.ca/images/index_menu_bg_1.png" class="index_menu_bg_1" />
        <img src="http://www.djdenner.ca/images/index_menu_3.png" class="index_menu_bg_2" />
        <a href="http://www.djdenner.ca/meet-dj"><img src="http://www.djdenner.ca/images/blank.gif" width="100%" height="100%" /></a>
    </div>
</div>


<div id="index_contact_info">
    <p><a href="http://www.djdenner.ca/meet-dj">Skip Intro</a></p>
</div>





<div id="index_misc_images_preload">

</div>




</div>
4

3 回答 3

2

我相信这是您正在调用的 php 脚本 ( images_preload.php ) 把事情搞砸了。

在我的 iPad 上，如果我浏览您的网站，我会得到您描述的行为：动画真的很慢，大约一半的时间会崩溃。

另一方面，如果我在测试服务器上托管 html 和 js，它似乎工作正常： 测试站点

官方网站和我的网站（至少在涉及客户的地方）之间唯一真正的区别是这个脚本不会被调用。

并且，在加载站点时监控网络流量，在调用 php 脚本后会出现一连串的网络请求，从 50 到 175，其中大部分是图像 GET。

可能是 iPad 无法处理那么多流量，同时执行动画。

我的建议是先注释掉图片预加载，检查动画现在流畅，iPad没有崩溃，然后你必须找到优化脚本的方法。

于 2013-10-08T22:54:06.680 回答
0

我测试了你的网站：http ://tools.pingdom.com/fpt/#!/eN9AZI/http://www.djdenner.ca/index_new我发现当你加载你的主页时它会生成48 个请求. 请看下图，它显示了请求的百分位数。

在此处输入图像描述

我确实相信，如果我们减少请求的数量，我们可以解决问题并防止它导致 iPad 上的浏览​​器崩溃。

我建议减少对您的主页的请求如下：

  1. 降低图像质量（这可以通过 Photoshop 完成）或使用免费在线工具（例如http://www.webresizer.com/resizer/ ） ，您也可以使用图像精灵来减少请求总数。另请查看是否可以将图像切成小块并使用background: repeat-x;属性作为示例。
  2. 将所有的 CSS 样式表分组到一个大型主样式表中。所以要求不高。
  3. 尝试看看您是否可以尽量减少使用 jQuery 并使用 css3 高级属性来复制您的效果。
于 2013-10-14T23:40:44.137 回答
0

您的脚本并非没有错误，但我看不出 iPad 崩溃的任何原因，我已经在 Sony Xperia ZR 上使用 Chrome 和 Opera 浏览器运行它并且一切正常，我没有 iPhone 或 Ipad 来测试它但是您可以尝试通过您的 iPad 加载 jsfiddle.net/m/ege，然后使用 debug.phonegap.com/client/#jsf_ege 在桌面上对其进行调试，但是我发现了一些错误并清除了它，希望它可能会有所帮助，请尝试使用这个，看看会发生什么？

$(document).ready(function(){
    window.animationstage = 0;
    setTimeout(index_window_resize(),500);

    load_1();

    $(window).resize(function() {
        index_window_resize();
    });

    $(window).bind('orientationchange', function(event) {
        index_window_resize();
    });

    $('.index_menu_container').each(function(){
        $(this).hover(
            function(){
                $(this).children('.index_menu_bg_1').stop().fadeTo(300, 1.0);
                $(this).children('.index_menu_bg_2').stop().fadeTo(300, 0.9);
                return false;
            }, 
            function(){
                $(this).children('.index_menu_bg_1').stop().fadeTo(300, 0);
                $(this).children('.index_menu_bg_2').stop().fadeTo(300, 0.5);
                return false;
            }
        );
    });


    $('a').on('click touchend', function(e) {
        $(this).unbind('mouseenter').unbind('mouseleave');
        $(this).off('hover');
        var link = $(this).attr('href');
        window.location = link;
    });

    $('.index_menu_container').on('click touchend', function(e) {
        $(this).unbind('mouseenter').unbind('mouseleave');
        $(this).off('hover');
    });

});


function load_1() {
    window.animationstage = 1;
    index_window_resize();
    $('#logo_large').delay(500).transition({opacity: 1},3000);
    $('#logo_large_shine').delay(2500).transition({opacity: 1},1000).delay(300).fadeTo(1000, 0.0, function(){
        if(window.windoww>=768) {
            load_2(); // trigger phase 2 of animation
        } else {
            //alert(window.windoww);
            $('#logo_large').fadeTo(1000,0.0, function(){
                window.location = "http://www.djdenner.ca/listings";
            });
        }
    // after animation stuff is done... prepare the menu DIVs
    });
    $('#logo_shine_silver').delay(2800).transition({opacity: 0},1000);


}   

function load_2() {
    window.animationstage = 2;
    // by now logo must have loaded... run the index_misc_images_preload loading mechanism
    $.ajax({
        url: "/images_preload.php"
    }).done(function ( data ) {
        $('#index_misc_images_preload').html(data);
    });


    $('#logo_large_shine').remove();
    // calculate logo width
    var logotopw = 460; // default width
    var logotoph = 113; // default height
    var top_leather_top = 160;
    var logo_large_top = 30;
    if(window.windoww<520) {
        var logoratio = logotoph/logotopw;
        logotopw = window.logow;
        logotoph = window.logoh;
        top_leather_top = logotoph+25;
        logo_large_top = 10;
        $('#top_logo_shadow').hide();
    }
    $('#index_contact_info').delay(1000).transition({opacity: 0},1000);
    $('#logo_large').delay(500).transition({width:logotopw+'px', height:logotoph+'px', marginTop:logo_large_top+'px'},2000);
    $('#top_leather').delay(1000).transition({top:'0px', height:top_leather_top+'px'}, 2000,'easeOutQuint', function(){
        load_3();
    });
}

function load_3() {
    window.animationstage = 3;
    // position slideshow #index_slideshow_container
    index_window_resize(); // run this again just so the width & height of the slideshow etc. is set right. 

    $('#index_menu').slideDown(600);
    $('#index_slideshow_container').fadeTo(1000,1.0);
        $('#index_slideshow_container div:eq(0)').fadeTo(1000,1.0, function(){
            load_4();
        }); // load up first one by default.
}

function load_4() { 
    window.animationstage = 4;
    index_window_resize();
}

function index_window_resize() {
    // find 60% mark from top
    window.windowh = $(window).height();
    window.windoww = $(window).width();

    //alert(window.windoww+' X '+window.windowh);

    $('#full_container').height(window.windowh);

    window.logow = $('#logo_large').width();
    window.logoh = $('#logo_large').height();

    window.ratiow = window.logow/940;
    window.ratioh = window.logoh/232;

    window.top50 = window.windowh*0.5-(window.logoh/2);

    window.logoleft = window.windowh-940;

    if(window.animationstage<2) {
        // if the animation stage is below 2, then we adjust the top margin of the large logo. 
        // if it's after that, that's after the logos' been moved to the top so we skip it. 
        $('#logo_large').css({"margin-top": window.top50+'px'});
    }

    // now deal with the shine.. it's 173 X 173 wide by default, unless on mobile. Need to use percentage. 
    var shineposleft = 785; // relative position default
    var shinepostop = 17; // relative position default

    shineposleft = window.ratiow * shineposleft;
    shinepostop = window.ratioh * shinepostop;

    var shinesize = ratiow * 173;

    $('#logo_large_shine').css({"width": shinesize+'px', "height" : shinesize+'px', "top":'-'+shinepostop+'px', "left":shineposleft+'px' });

    // adjust the width & height of the logo on top. 
    if(window.animationstage>2) {
        if(window.windoww<520 && window.windoww<window.windowh) {
            // smaller screen.. adjust width of logo to 80% of the window. 
            $('#logo_large').width(window.windoww*0.8).height(window.windoww*0.8*232/940).css({"marginTop":'15px'});
            var top_leather_h = $('#logo_large').height()+25;
            var index_menuw = window.windoww*0.8;
            $('#top_leather').height(top_leather_h);
            $('#top_logo_shadow').hide();
            $('#index_menu').css({"width":index_menuw+'px', "marginTop" : 10});

            var menu_containerratio = 60/400;
            $('.index_menu_container').css({"width":index_menuw+'px', "height":(menu_containerratio*index_menuw)+'px'});

            // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
            index_slideshow_container_height = window.windowh-$('#top_leather').height();
            $('#index_slideshow_base img').css({'width':'auto', 'height':'100%'});

        } else if(window.windoww<768) {

            // smaller screen.. adjust width of logo to 80% of the window. 
            $('#logo_large').width(window.windoww*0.4).height(window.windoww*0.4*232/940).css({"marginTop":'15px'});
            var top_leather_h = $('#logo_large').height()+25;
            $('#top_leather').height(top_leather_h);
            $('#top_logo_shadow').hide();
            $('#index_menu').css({"width":window.windoww*0.4, "marginTop" : $('#logo_large').height()*0.3});

            var menu_containerratio = 60/400;
            $('.index_menu_container').css({"width":window.windoww*0.4, "height":menu_containerratio*window.windoww*0.4});

            // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
            index_slideshow_container_height = window.windowh-$('#top_leather').height();
            $('#index_slideshow_base img').css({'width':'auto', 'height':'100%'});

        } else {
            // full screen
            $('#logo_large').css({"marginTop":'30px', 'width':'460px', 'height':'113px'});
            $('#top_leather').height(160);
            $('#top_logo_shadow').show();
            $('#index_menu').css({"width":'400px', "marginTop" : '80px'});
            $('.index_menu_container').css({"width":'400px', "height":'60px'});

            // see if the screen ratio is vertical or horizontal...
            // ratio is 2400 X 1140
            var index_slideshow_container_ratio = 1140/2400;

            // after leather bar & top logo has been adjusted.. slideshow height adjuster

            var index_slideshow_container_height = window.windowh-$('#top_leather').height();

            if (index_slideshow_container_height/window.windoww>index_slideshow_container_ratio) {
                // if the ratio of the width/height is less than the 2400 X 1140, then img should be 100% height. 
                index_slideshow_container_height = window.windowh-$('#top_leather').height();

                var index_slide_imgh = index_slideshow_container_height;
                var index_slide_imgw = index_slide_imgh/1140*2400;
                var index_slide_left = (index_slide_imgw-window.windoww)/2;
                var index_slide_top = 0;
            } else {

                // image is more panoramic (wider) than provided space compared to the height. set height as base. 
                var index_slide_imgw = window.windoww;
                var index_slide_imgh = index_slide_imgw/2400*1140;
                var index_slide_top = 0; // regardless of how tall the image is, start at top so we dont cut heads off.
                var index_slide_left = 0;
            }

            $('#index_slideshow_container').width(window.windoww).height(index_slideshow_container_height).css('top', $('#top_leather').height()+'px');
            $('.index_slide').width(window.windoww).height(index_slideshow_container_height);

            $('.index_slideshow_bg').css({width:index_slide_imgw+'px', height:index_slide_imgh+'px', left:-index_slide_left+'px', top:-index_slide_top+'px'}); 

        }

        // index_slide elements are set.. now to configure the width/height of the image within so as to not break ratio
        // 2400/1140 is the ratio of the images. 
        var index_slide_img_ratio = 2400/1140;
        var index_slide_ratio = window.windoww/index_slideshow_container_height;
    }

    if(window.animationstage>3) {
        var index_slideshoww = ((index_slide_imgw-400)/2)*0.6; // from full width, deduct the menubar width (400), split in half.. then 60% of remaining gap on left. 
        $('.index_slideshow').width(index_slideshoww); // set the width first. 

        $('.index_slideshow').each(function(){
            var index_slideshowh = $(this).find('p').height(); // set height of each item based on the paragraph height + 60 pixels gap
            $(this).height(index_slideshowh);
            $(this).css({'opacity':0, 'left':'30px', 'top':(index_slideshow_container_height-index_slideshowh-120)+'px'});
            // for some reason 30px from bottom doesn't work, presumably because it's before the fathering DIV loads and registers height at 0px at the moment of running.
            // So we set margin from top. Deduct the height of the element from total height and then another 120 pixels for gaps etc. to get final margin from top.

        });
    }


}

$(function() {

    var degree = 0,
        timer;

    function rotate() {    
        $('#logo_large_shine').css({ transform: 'rotate(' + degree + 'deg)'});
        // timeout increase degrees:
        timer = setTimeout(function() {
            ++degree;
            rotate(); // loop it
        },20);
    }

    rotate();    // run it!

});
于 2013-10-08T20:56:49.823 回答