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