预加载器问题

-4

我仍然是这个网站的大多数新手，但我试图得到一个div在网站之前加载，循环通过我创建的div，然后加载网站。这里是我的代码下面循环，并得到正确的div：预加载器问题

$(function() { 
$('#splash-holder').delay(6000).toggle('#splash-main'); 

var counter = 0, 
    divs = $('#splash-one, #splash-two, #splash-three, #splash-five'); 

function showDiv() { 
    divs.hide() // hide all divs 
     .filter(function (index) { return index == counter % 3; }) // figure out correct div to show 
     .fadeIn('fast'); // and show it 

    counter++; 
}; // function to loop through divs and show correct div 

showDiv(); // show first div  

setInterval(function() { 
    showDiv(); // show next div 
}, 13 * 180); // do this every 10 seconds  

});

然后我用这个预加载脚本：

$(window).load(function() { 
$('#preloader').delay(6000); 
$('#preloader').fadeTo('fast', 0.1 , function() { 
$('body').css('overflow','visible'); 
$(this).remove(); 
}); 
});

这里是我的代码：

<div id="preloader"> 
    <div id="spinner_container"> 
    <div id="splash-holder"> 
     <div id="splash-title" class="hFont">We <img src="<?php bloginfo('template_directory'); ?>/images/logo-c.png" /></div> 
     <div id="splash-one" class="hFont">conversations not messages.</div> 
     <div id="splash-two" class="hFont">bridges not silos.</div> 
     <div id="splash-three" class="hFont">things differently.</div> 
</div><!-- #splash-holder --> 
    </div><!-- #spinner-container --> 
</div><!-- #preloader -->

这工作，但我想知道是否有更清晰的编码方式。

来源

2011-12-20 Outlawsessy

这将更适合在js标签下比php。作为回答：您应该首先加载网站（浏览器法律），然后在页面的其余部分隐藏的情况下修改div。 – khael 2011-12-20 17:19:27

删除了PHP标签。这个问题没有什么是PHP。 – ceejayoz 2011-12-20 17:21:28

什么是最好的方式来实现我想要做的事情。任何帮助将不胜感激。我知道Khael说要加载网站，然后修改div，而隐藏页面的其余部分。有人可以帮我解决这个问题吗？ – Outlawsessy 2011-12-22 22:09:36

没有办法在页面之前加载div。几乎最佳的解决方案是你的。您不能在页面之前加载div，因为div与代码的其余部分一样是DOM的一部分。您可以隐藏除一个div之外的所有页面，并在显示加载栏时等待页面加载（如果这是您正在尝试执行的操作），但仅通过ajax就可以加载顺序页面。

ajax的方式是只加载带有脚本和加载栏的页面，然后从ajax接收的json构建页面，或者在加载栏“屏幕”后加载整个视口。

实现它很有趣，它是相当多的代码。

来源

2012-01-15 08:31:17 khael

谢谢你清除那个凯尔。我想我会尝试你所说的，如果我隐藏除一个div之外的所有页面，这将是最好的。 – Outlawsessy 2012-01-17 20:15:29

预加载器问题

回答

相关问题