I have a project where I want to show a specific div (about the company) while a large fullscreen jQuery cycle is loading. I don't want to show the loading div until the images are loaded. It works well locally, but when I upload it the page shows the about div (#index-about) long enough for the first image to load. If you use the cycle to move to the next slide the next image is not loaded yet. I deduced that it must not be preloading correctly.
我有一个项目,我想显示一个特定的div(关于公司),同时加载一个大的全屏jQuery周期。我不想在加载图像之前显示加载div。它在本地运行良好,但是当我上传它时,页面显示大约div(#index-about)足够长的时间来加载第一个图像。如果使用循环移动到下一张幻灯片,则尚未加载下一张图像。我推断它一定不能正确预加载。
Here's my code. Thanks in advance! *EDIT: per request, here's everything. Warning: it's a ton of code. * THE HTML:
这是我的代码。提前致谢! *编辑:根据要求,这里是一切。警告:这是一大堆代码。 * HTML:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SGC</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<!-- Lightbox CSS -->
<script src="js/libs/modernizr-1.7.min.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/libs/jquery-1.6.2.min.js"></script>
<script src="js/libs/jquery.cycle.all.js"></script>
<script src="js/libs/jquery.mousewheel.min.js"></script>
<script src="js/libs/jquery.easing.1.3.js"></script>
<script src="js/libs/jquery.address-1.4.min.js"></script>
<script src="js/libs/jquery.waitforimages.js"></script>
<script src="js/index2.js"></script>
<script src="js/ajax.js"></script>
</head>
<body>
<div id="container">
<h1><a href="#/index" id="sgc-logo"><img src="images/SGC_logotype.png" alt="SGC"></a></h1>
<header>
<div id="nav-pulldown">
<a href="javascript:void(0);" id="topbluelink"></a>
</div>
<div class="loading"></div>
<div id="overlay_b1"></div>
<div id="overlay_b2"></div>
<div class="overlay" id="overlay-main">
<ul id="nav-main" style="opacity:0;">
<li><a href="#/about" id="btn-about" class="ajax"></a></li>
<li><a href="#/work" id="btn-work" class="ajax"></a></li>
<li><a href="#/contact" id="btn-contact"></a></li>
</ul>
</div>
</header>
<div id="main" role="main">
<div id="loading_page" style="display:none; "><img src="images/ajax-loader-gray.gif"/></div>
<div id="main-content">
</div><!-- eo main-content-->
<!-- ABOUT -->
<div class="overlay" id="index-about">
<div id="about-slider-container">
<ul class="about-slider">
<li class="about-statement" id="statement-1">
<h2>What if the medium isn't the entire message?</h2>
<p class="grey quote">"It's ideas that connect with consumers, build brands, and unleash the full potential of communications, both online and off."<br>
<span style="float:right;margin-right:20px;"> — <a href="#/index">SGC</a></span></p>
</li>
<!-- eo statement-1-->
</ul>
</div><!-- eo about-slider-container-->
</div>
<!-- / ABOUT -->
</div>
<footer>
</footer>
</div> <!-- eo #container -->
<!--<script>
$('#loading_page').css('margin-top',($(window).height()-64)/2);
</script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.2.min'>\x3C/script>")</script>
-->
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<!-- Google Analytics
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script> -->
</body>
</html>
THE JS:
function ClickURLHash(o,i){
var urlHash = o.attr("id");
$.address.value(urlHash);
}
function LoadURLHash(){
var urlHash = location.hash;
urlHash = urlHash.replace(/^#\//,"");
var myHref = $(this).attr('href');
if ((urlHash == "") || (urlHash == "index")){
if ($('#topbluelink').hasClass('active')){ //DROPDOWN ON
$('#overlay-main').animate({top:'100%'},600,'easeOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint',function(){
$('#main-content').fadeTo(600,0,function(){
$('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
$.address.value("/");
};
});
$('#topbluelink').removeClass('active');
});
}
else if (!$('#topbluelink').hasClass('active')){ //DROPDOWN OFF
$('#overlay_b2,#overlay_b1').css('top','100%');
$('#overlay-main').animate({top:'100%'},600,'easeOutQuint',function(){
$('#main-content').fadeTo(600,0,function(){
$('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
$.address.value("/");
};
});
$('#topbluelink').removeClass('active');
});
}else{
//new code
//$('#loading_page').html('<img src="images/ajax-loader-black.gif"/>').css('display','');
//$('#index-about').show();
var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/*c_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
var gotime = _images.length;
$.each(_images,function(e) {
$(new Image()).load(function() {
if (--gotime < 1)
{
$('#index-about').fadeOut(300, function(){
$('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');
$('#main-content').css('opacity','0').load('pages/home.html',function(){
$('#main-content').animate({opacity:'1'},400);
});
});
}
}).attr('src',this);
});
$('#topbluelink').removeClass('active');
$.address.value("/");
}
} else if ((urlHash == "work") || (urlHash == "contact")) {
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active')
});
}
else{
//new cod2e
$('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',
function (){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
$('ul#nav-work').animate({opacity:'1'},600,'linear');
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
//KILL INDEX ABOUT
var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/*c_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
var gotime = _images.length;
$.each(_images,function(e) {
$(new Image()).load(function() {
if (--gotime < 1)
{
$('.overlay#index-about').css('display','none').hide().remove()
$('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');
$('#main-content').css('opacity','0').load('pages/'+urlHash+'.html',function(){
$('#main-content').animate({opacity:'1'},400);
});
}
}).attr('src',this);
});
} else if (urlHash == "about"){
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active')
});
}
else{
//new cod2e
$('#index-about').hide();
$('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',
function (){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
$('ul#nav-work').animate({opacity:'1'},600,'linear');
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
} else {
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').animate({top:'-100%'},600,function(){
$("#overlay_b2").delay(200).animate({top:'-100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(400).animate({top:'-100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%'},600,'easeOutQuint'),function(){$.address.value("/"+urlHash)};
});
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$('#topbluelink').removeClass('active');
}
else{
//IF THIS IS A PROJECT PAGE (not #/about, #/work, or #/contact)
$('#index-about').hide();
$("#overlay_b1").animate({top:'0%'},600,'easeInOutQuint');
$("#overlay_b2").delay(400).animate({top:'0%'},600,'easeInOutQuint');
$('#main-content').delay(800).animate({top:'0%'},600,'easeOutQuint', function (){
$('#loading_page').css('display','block');
$('#main-content').load('pages/'+urlHash+'.html', function () {
$('#main-content').waitForImages(function()
{
$('#loading_page').css('display','none');
$("#overlay_b2").animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(400).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(800).show(600).css('top','-100%').animate({top:'0%'},600,'easeOutQuint',
function (){
slide_top = ($('.detail-slide-content').css('height').replace('px','')-$('.detail-slide-body').css('height').replace('px',''))/2+200;
$(".detail-slide-body").css('top', slide_top+'px');
$('.detail-slide-content').animate({opacity:'1'},1000,'easeOutQuint');
}
//
);
});
});
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
}
}
$(document).ready(function(){
$.address.externalChange(function(event) {
LoadURLHash();
});
});
$(window).load(function(){
$('#main-content').animate({opacity:'1'},800,'easeInQuint');
});
1 个解决方案
#1
3
Have you tried setting the cycle's parent container style to display:none; visiblity:hidden;
您是否尝试将循环的父容器样式设置为display:none;可见性:隐藏;
And then once the page is loaded, $('div.container').show(); ?
然后一旦页面加载,$('div.container')。show(); ?
That way, by default the HTML will be hidden and will not render on the screen until the page is loaded.
这样,默认情况下,HTML将被隐藏,并且在页面加载之前不会在屏幕上呈现。
#1
3
Have you tried setting the cycle's parent container style to display:none; visiblity:hidden;
您是否尝试将循环的父容器样式设置为display:none;可见性:隐藏;
And then once the page is loaded, $('div.container').show(); ?
然后一旦页面加载,$('div.container')。show(); ?
That way, by default the HTML will be hidden and will not render on the screen until the page is loaded.
这样,默认情况下,HTML将被隐藏,并且在页面加载之前不会在屏幕上呈现。