0
我遇到了加载页面的速度问题。我已经运行了几次测试，并且几乎都失败了。我试过压缩图像，现在还没有效果。我绝不擅长编码。相当新，但试图学习。只是一个猜测，但我认为我的网页渲染速度令人痛苦，可能是由于手风琴代码中的错误。一旦加载，一切似乎都是按顺序的，但是，在创建小提琴时，手风琴无法正常工作。它也在我尝试过的3或4种不同的编辑器中正确渲染。下面你会发现一个工作页面的链接以及我用于手风琴的代码。任何帮助将不胜感激。页面加载速度很慢
页面链接：http://www.realtimehockey.net/tournaments.html
小提琴：http://jsfiddle.net/Del087/rb4084ef/
的CSS
<style type='text/css'>
/*<![CDATA[*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
width: 100%;
background:#ffffff;
border:.5px solid black;
padding-left: 5px;
padding-right: 0px;
margin-top: 5px;
margin-right: 5px;
display: inline-block;
}
/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
padding:15px;
margin-right: 5px;
display:inline-block;
border-bottom:2px solid #ffffff;
background:linear-gradient(#151515, #080808);
transition:all linear 0.15s;
/* Type */
font-family: patua one;
font-color: #ffffff;
font-size: 28px;
line-height: 50px;
font-weight: 400;
font-style: italic;
text-shadow:0px 0px 0px #1a1a1a;
color:#fff;
border: 1px solid #ffffff;
text-indent: 15px;
text-decoration: none;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:linear-gradient(#ff8a28, #ff6600);
font-family: patua one;
font-color: #ffffff;
font-size: 28px;
font-weight: 300;
font-style: italic;
text-shadow:0px 0px 0px #1a1a1a;
color:#fff;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:5px;
display:none;
}
/*]]>*/
</style>
<style>
#table-wrapper {
position:relative;
}
#table-scroll {
height:600px;
width: auto;
overflow:auto;
margin-top:5px;
}
#table-wrapper table {
width: auto;
float: left;
}
#table-wrapper table * {
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:auto;
}
</style>
Java脚本
<script src='http://code.jquery.com/jquery-1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
});//]]>
</script>
的HTML
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1"><img alt=""
border="0" height="35" src=
"http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
width="40"> ALL TOURNAMENTS</a>
<div class="accordion-section-content" id="accordion-1">
<div id="table-wrapper">
<div id="table-scroll">
<iframe frameborder="0" height="900" scrolling="no"
src="https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214259&authkey=AHPRSPlWZMfMr-g&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF83&wdHideGridlines=True"
width="695"></iframe>
</div>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href=
"#accordion-2"><img alt="" border="0" height="35" src=
"http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
width="40"> OneHockey TOURNAMENTS</a>
<div class="accordion-section-content" id="accordion-2">
<div id="table-wrapper">
<div id="table-scroll">
<iframe frameborder="0" height="796" scrolling="no"
src=
"https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214294&authkey=AHlomnY6QBEDbNg&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF39&wdHideGridlines=True"
width="695"></iframe>
</div>
</div>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href=
"#accordion-3"><img alt="" border="0" height="35" src=
"http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
width="40"> NST TOURNAMENTS</a>
<div class="accordion-section-content" id="accordion-3">
<iframe frameborder="0" height="359" scrolling="no" src=
"https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214254&authkey=APKpBhWADrxGjJc&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF17&wdHideGridlines=True"
width="695"></iframe>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href=
"#accordion-4"><img alt="" border="0" height="35" src=
"http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHAccordionLogo3_zpszspfxeev.png"
width="40"> CanLan TOURNAMENTS</a>
<div class="accordion-section-content" id="accordion-4">
<iframe frameborder="0" height="630" scrolling="no" src=
"https://onedrive.live.com/embed?cid=704B9036DA9EF5A7&resid=704B9036DA9EF5A7%214256&authkey=ADHo6NDfwBXvj5k&em=2&wdAllowInteractivity=False&Item='Sheet1'!A1%3AF36&wdHideGridlines=True"
width="695"></iframe>
</div>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->
糟糕的虚拟主机。这271kB的图像需要很长时间才能加载：https://s3-us-west-1.amazonaws.com/gamepostpictures/teamPicThumb115230-28368-10b8qqu.png – blex
这与您的代码无关，这是webhosting问题。您可能正在共享服务器上，并且其中一个站点（或更多或全部）正在生成大量流量。其他选项可能是主机只是..好...坏。我不确定你付了什么，但通常便宜的托管可以导致这一点。我跑了一个测试。我告诉你，渲染花了一分多钟，而且因为你每分钟都会做每分钟一次的ajax更新，所以我猜... ... oof – Dorvalla
你包含“normalize.css”和“result-light.css”，但它们不在指定位置。 （http://www.realtimehockey.net/css/normalize.css）和（http://www.realtimehockey.net/css/result-light.css）。这可能会使网站变慢。 – Wazaaaap