Why does my splash page freeze mobile devices?
https://stackoverflow.com/questions/23690782
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
I am trying to make a simple splash page for an event, but each time I try to load the page on a mobile device it would take forever to load, then it would freeze.
At fist I thought it could be due to the background picture being extremely large. (memory wise) So I re saved the pic at a lower quality.
That cut down the load time a lot, but the mobile sites still freeze up.
I have a custom font, (Could that be the problem?)
Here is my HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>The Apocalypse Is HERE!</title>
<!-- Custom CSS for the 'Full' Template -->
<link href="css/newStyle.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});</script>
</head>
<body>
<div id="mainWrapper">
<div id="topWrapper">
<div id="zombieWrap"><center>The Zombie Apocalypse Is Here!</center>
</div>
<center>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/tb0Op6cpY2s" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<center>
<div id="bottomWrapper">
<div class="leftWrapper"><a href="http://www.rugamingcenter.com/zombies">Click Here For Tickets</a></div>
<div class = "rightWrapper"><a href="http://www.rugamingcenter.com/index1.php">Click Here For the Richmond Underground Home Page</a></div>
</div>
</center>
</div>
</div>
</body>
Here is the CSS
/* GLOBAL STYLES
-------------------------------------------------- */
@font-face
{
font-family: 'zombieF';
src: url('zombieFont.ttf');
}
/*------------------------------------------------------------------------------------------NON MOBILE=================*/
body{
background-color:black;
background: url(wall.jpg);
background-size:50%,50%;
background-repeat: repeat;
}
#mainWrapper{
margin-top:2.5em;
margin-left: 10%;
margin-right: 10%;
}
#topWrapper{
width:100%;
}
#videoWrapper{
margin-top:1em;
}
#zombieWrap{
font-family: zombieF;
font-size: 50px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
#video{
max-width: 400px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
-moz-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
font-family: zombieF;
font-size: 25px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
.leftWrapper{
width:50%;
float:left;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: white;
}
.leftWrapper:hover { -moz-box-shadow: 0 0 10px #white; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
.rightWrapper{
width:50%;
float:right;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
@media only screen and (max-width: 500px){
.rightWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
padding-top:15px;
}
.leftWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
}
#zombieWrap{
border-top:5px;
font-family: zombieF;
font-size: 30px;
color:red;
}
#mainWrapper{
height:100%;
margin-left: 10%;
margin-right: 10%;
}
#containingBlock {
width:50%;
}
video { width: 50% !important; height: auto !important; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Maybe I am missing something. Anyone Have any suggestions?
Нет правильного решения
Не связан с StackOverflow
