http://www.djdenner.ca/index_new
これは単純に、iPad (Retina ディスプレイを搭載した iPad 第 4 世代) のページに多すぎるという問題ですか?
ページを開くと、半分の確率でクラッシュします。
アニメーションの数、数学的計算の数などを減らすための措置を講じましたが、それでも同じことを行います。
ほとんどの場合、animate、fadeIn、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>
