Firefox 中页面加载缓慢
我在 Lion 上使用 ruby on Rails 3.1 开发了一个网站。我正在使用 nivo 滑块（内容旋转器）。我在 Opera 和 Safari 中加载没有任何明显的延迟。但在 Firefox 中加载时可能需要 10 秒以上。在加载滑块之前，不会加载页面上的其他内容。另外，当我尝试使用 <%= stylesheet_link_tag 'application', :cache=> 缓存资源时true%> 我收到错误数量的争论错误。
_slider.html.erb
<link rel="stylesheet" href="default.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript">
jQuery(function() {
jQuery("#nivoslider-283").nivoSlider({
effect:"fade",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="assets/3.jpg" alt="" title="This is an example of a caption"/>
<img src="assets/1.jpg" alt="" data-transition="slideInLeft"/>
<img src="assets/2.jpg" alt="" title="#htmlcaption"/>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$('#slider').nivoSlider();
</script>
home.html.erb
<%= render "shared/slider" %>
<%= render "shared/calender" %>
<div id="featured">
<b><%= @post.first.title %></b>
<%= simple_format(@post.first().content) %>
</div>
style.css
.theme-default #slider {
margin: 5px auto 0 auto;
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
.nivoSlider
{
position:relative;
width: 618px;
height: 246px;
background: url('loading.gif') no-repeat 50% 50%;
}
.nivoSlider img
{
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a
{
border:0;
display:block;
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Cor</title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<img src="assets/Lighthouse%201000w%20x%20300l%20pixels.jpg" id="header-image">
<%= render "shared/navigation" %>
<article>
<%= yield %>
</article>
</body>
</html>
I developing a site with ruby on rails 3.1 on Lion. I'm using the nivo slider(content rotator). I loads without any noticable delay in Opera and Safari. But when loading in Firefox the it can take more than 10 seconds. No other content on the page will load until the slider is loaded. Also when i try to cache asset using <%= stylesheet_link_tag 'application', :cache=> true%> I get a wrong number of arguements error.
_slider.html.erb
<link rel="stylesheet" href="default.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript">
jQuery(function() {
jQuery("#nivoslider-283").nivoSlider({
effect:"fade",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="assets/3.jpg" alt="" title="This is an example of a caption"/>
<img src="assets/1.jpg" alt="" data-transition="slideInLeft"/>
<img src="assets/2.jpg" alt="" title="#htmlcaption"/>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$('#slider').nivoSlider();
</script>
home.html.erb
<%= render "shared/slider" %>
<%= render "shared/calender" %>
<div id="featured">
<b><%= @post.first.title %></b>
<%= simple_format(@post.first().content) %>
</div>
style.css
.theme-default #slider {
margin: 5px auto 0 auto;
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
.nivoSlider
{
position:relative;
width: 618px;
height: 246px;
background: url('loading.gif') no-repeat 50% 50%;
}
.nivoSlider img
{
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a
{
border:0;
display:block;
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Cor</title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<img src="assets/Lighthouse%201000w%20x%20300l%20pixels.jpg" id="header-image">
<%= render "shared/navigation" %>
<article>
<%= yield %>
</article>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
检查此工具的页面速度
Yslow 浏览器加载
Google 页面速度
Check this tools for page speed
Yslow browser pluing
Google page speed