jQuery动画（带有用于硬件加速的转换插件）正在iPad浏览器上崩溃页面
http://www.djdenner.ca/index_new
这仅仅是iPad的一个页面问题（带视网膜显示的iPad第4代）
当我打开页面时，有一半时间崩溃。
我已采取措施减少动画的数量，数学计算的数量等，但它仍然会做同样的事情。
我正在使用animate，fadeIn＆amp; fadeOut大部分都是。我开始使用传输插件切换它以尽可能利用硬件加速，但它仍然会崩溃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=\"mailto:");
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>
3 个答案:
答案 0 :(得分：2)
我相信你正在调用的PHP脚本（ images_preload.php ）会搞砸了。
在我的iPad上，如果我浏览您的网站，我会得到您描述的行为：动画非常慢，并且大约有一半的时间都会崩溃。
另一方面，如果我在测试服务器上托管html和js，它似乎工作正常： Test site
官方网站与我的唯一真正的区别（至少在客户参与的地方）是这个脚本不会被调用。
并且，在加载站点时监控网络流量，在调用php脚本后，会有一连串的网络请求，从50到175，其中大部分是图像GET。
可能是iPad在同时执行动画时无法处理那么多流量。
我的建议是首先评论图像预加载，并检查动画现在是否平滑且iPad没有崩溃，然后你必须找到一种优化脚本的方法。
答案 1 :(得分：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!
});
答案 2 :(得分：0)
我测试了您的网站：http://tools.pingdom.com/fpt/#!/eN9AZI/http://www.djdenner.ca/index_new，我发现当您加载主页时，它会生成 48个请求。请查看以下显示请求百分位数的图像。
我相信如果我们减少了请求数量，我们就可以解决问题并防止它在iPad上崩溃浏览器。
我建议减少对您主页的请求如下：
- 降低图像的质量（这可以通过photoshop完成）或通过免费工具（如http://www.webresizer.com/resizer/），您也可以使用图片精灵来减少请求的总数。另请参阅是否可以将图像剪切成较小的片段，并使用
background: repeat-x;属性作为示例。 - 将所有css样式表分组到一个大型样式表中。所以请求没那么多。
- 试着看看你是否可以最大限度地减少jQuery的使用，并使用css3高级属性来复制你的效果。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？