预加载器问题,预加载器不在页面顶部

时间:2009-12-07 13:15:23

标签: javascript joomla preloader

我昨天(晚上很晚)发了一个帖子,但那个人对你不太清楚,所以我希望这会更好。

我找到了一个代码,我想将其用作我网站的预加载器。它似乎有效,但问题是完整的网站仍然可见。该脚本的制造商声称预加载器应覆盖网站,并在页面加载时消失。

预加载器确实消失了,但是网站在预加载器的顶部,我不得不说它是一个Joomla网站,有人可以向我解释为什么不是网站没有被预加载器覆盖。我认为这是因为在实际的头部开始之前有很多代码被加载。

这是代码:

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Gilbert Davis -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) {  // Netscape 4
document.hidepage.visibility = 'hidden';
}
else {  // IE 4
document.all.hidepage.style.visibility = 'hidden';
      }
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="loadImages()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<div id="hidepage" style="position: absolute; left:5px; top:5px; background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%; width: 100%;"> 

<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div> 

<!-- put the rest of your page contents here -->

这是我的模板index.php的完整代码,以防您需要了解它。

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
define( 'YOURBASEPATH', dirname(__FILE__) );

require( YOURBASEPATH.DS."rt_styleswitcher.php");
JHTML::_( 'behavior.mootools' );
global $template_real_width, $leftcolumn_width, $rightcolumn_width, $tstyle;
global $js_compatibility, $menu_rows_per_column, $menu_columns, $menu_multicollevel;
global $showcase_block, $showcase2_block, $showcase3_block, $user1_block, $user2_block, $user3_block, $mainbody_block, $side_block, $user4_block, $user5_block, $user6_block, $user7_block, $user8_block, $user9_block, $splitmenu_col, $frontpage_component;

$live_site              = $mainframe->getCfg('live_site');
$template_path          = $this->baseurl . '/templates/' .  $this->template;
$preset_style           = $this->params->get("presetStyle", "style7");
$frontpage_component    = $this->params->get("enableFrontpage", "show");
$enable_ie6warn         = ($this->params->get("enableIe6warn", 0)  == 0)?"false":"true";
$font_family            = $this->params->get("fontFamily", "affinity");
$enable_fontspans       = ($this->params->get("enableFontspans", 1)  == 0)?"false":"true";
$enable_inputstyle      = ($this->params->get("enableInputstyle", 1) == 0)?"false":"true";
$inputs_exclusion       = $this->params->get("inputsExclusion", "'.content_vote','#login-module'");
$template_width         = $this->params->get("templateWidth", "959");
$leftcolumn_width       = $this->params->get("leftcolumnWidth", "210");
$rightcolumn_width      = $this->params->get("rightcolumnWidth", "260");
$leftinset_width        = $this->params->get("leftinsetWidth", "180");
$rightinset_width       = $this->params->get("rightinsetWidth", "180");
$splitmenu_col          = $this->params->get("splitmenuCol", "rightcol");
$menu_name              = $this->params->get("menuName", "mainmenu");
$menu_type              = $this->params->get("menuType", "moomenu");
$menu_rows_per_column   = $this->params->get("menuRowsPerColumn");
$menu_columns           = $this->params->get("menuColumns");
$menu_multicollevel     = $this->params->get("menuMultiColLevel", 1);
$default_font           = $this->params->get("defaultFont", "default");
$show_date              = ($this->params->get("showDate", 1)  == 0)?"false":"true";
$clientside_date        = ($this->params->get("clientSideDate", 1) == 0)?"false":"true";
$show_logo              = ($this->params->get("showLogo", 1)  == 0)?"false":"true";
$show_logo_slogan       = ($this->params->get("showLogoslogan", 1)  == 0)?"false":"true";
$logo_slogan            = $this->params->get("logoSlogan", "Apr 09 Design");
$show_textsizer         = ($this->params->get("showTextsizer", 1)  == 0)?"false":"true";
$show_topbutton         = ($this->params->get("showTopbutton", 1)  == 0)?"false":"true";
$show_copyright         = ($this->params->get("showCopyright", 1)  == 0)?"false":"true";
$show_defaultsettings   = ($this->params->get("showDefaultsettings", 1)  == 0)?"false":"true";
$thirdparty_styling     = ($this->params->get("thirdpartyStyling", 1)  == 0)?"false":"true";
$js_compatibility       = ($this->params->get("jsCompatibility", 0)  == 0)?"false":"true";

// Module Block Styles
$showcase_block         = $this->params->get("showcaseBlock", "light");
$showcase2_block        = $this->params->get("showcase2Block", "light");
$showcase3_block        = $this->params->get("showcase3Block", "light");
$user1_block            = $this->params->get("user1Block", "light");
$user2_block            = $this->params->get("user2Block", "light");
$user3_block            = $this->params->get("user3Block", "light");
$mainbody_block         = $this->params->get("mainbodyBlock", "light");
$side_block             = $this->params->get("sideBlock", "light");
$user4_block            = $this->params->get("user4Block", "light");
$user5_block            = $this->params->get("user5Block", "light");
$user6_block            = $this->params->get("user6Block", "light");
$user7_block            = $this->params->get("user7Block", "light");
$user8_block            = $this->params->get("user8Block", "light");
$user9_block            = $this->params->get("user9Block", "light");

// sortables options
$sortables              = ($this->params->get("sortableElements", 1)  == 0)?"false":"true";
$sortables_ghost        = $this->params->get("sortableGhost", 1);
$sortables_opacity      = $this->params->get("sortableOpacity", 0.5);
$sortables_radius       = $this->params->get("sortableRadius", 16);

// sortables options vertical
$sortables_ver          = ($this->params->get("sortableElementsVer", 1)  == 0)?"false":"true";
$sortables_ghost_ver    = $this->params->get("sortableGhostVer", 1);
$sortables_opacity_ver  = $this->params->get("sortableOpacityVer", 0.5);
$sortables_radius_ver   = $this->params->get("sortableRadiusVer", 16);

// sortables options modules
$sortables_modules          = ($this->params->get("sortableElementsModules", 1)  == 0)?"false":"true";
$sortables_ghost_modules    = $this->params->get("sortableGhostModules", 1);
$sortables_opacity_modules  = $this->params->get("sortableOpacityModules", 0.5);
$sortables_radius_modules   = $this->params->get("sortableRadiusModules", 16);


// moomenu options
$moo_bgiframe           = ($this->params->get("moo_bgiframe'","0") == 0)?"false":"true";
$moo_delay              = $this->params->get("moo_delay", "500");
$moo_duration           = $this->params->get("moo_duration", "600");
$moo_fps                = $this->params->get("moo_fps", "200");
$moo_transition         = $this->params->get("moo_transition", "Sine.easeOut");

$moo_bg_enabled         = ($this->params->get("moo_bg_enabled","1") == 0)?"false":"true";
$moo_bg_over_duration       = $this->params->get("moo_bg_over_duration", "500");
$moo_bg_over_transition     = $this->params->get("moo_bg_over_transition", "Expo.easeOut");
$moo_bg_out_duration        = $this->params->get("moo_bg_out_duration", "600");
$moo_bg_out_transition      = $this->params->get("moo_bg_out_transition", "Sine.easeOut");

$moo_sub_enabled        = ($this->params->get("moo_sub_enabled","1") == 0)?"false":"true";
$moo_sub_opacity        = $this->params->get("moo_sub_opacity","0.95");
$moo_sub_over_duration      = $this->params->get("moo_sub_over_duration", "50");
$moo_sub_over_transition    = $this->params->get("moo_sub_over_transition", "Expo.easeOut");
$moo_sub_out_duration       = $this->params->get("moo_sub_out_duration", "600");
$moo_sub_out_transition     = $this->params->get("moo_sub_out_transition", "Sine.easeIn");
$moo_sub_offsets_top        = $this->params->get("moo_sub_offsets_top", "0");
$moo_sub_offsets_right      = $this->params->get("moo_sub_offsets_right", "1");
$moo_sub_offsets_bottom     = $this->params->get("moo_sub_offsets_bottom", "0");
$moo_sub_offsets_left       = $this->params->get("moo_sub_offsets_left", "1");

require(YOURBASEPATH . "/rt_styleloader.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

    <head>

        <jdoc:include type="head" />
        <?php
        require(YOURBASEPATH . DS . "rt_utils.php");
        require(YOURBASEPATH . DS . "rt_head_includes.php");
        require(YOURBASEPATH . DS . "rt_sectionrows.php");

        $section_rows = new sectionRows($this);
    ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="Z9WJtvhl4rIFVUanvmtEs9VfXjL2jmOz49ns65RZ91Y=" />
<script src="http://bubble.websnapr.com/83m0ddwhbsLq/swh/" type="text/javascript"></script>


<link rel="icon" type="image/png" href="/images/icon.png" />
<!--[if IE]>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<![endif]-->

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Gilbert Davis -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
else {
if (document.layers) {  // Netscape 4
document.hidepage.visibility = 'hidden';
}
else {  // IE 4
document.all.hidepage.style.visibility = 'hidden';
      }
   }
}
//  End -->
</script>
    </head>
    <body OnLoad="loadImages()" id="ff-<?php echo $fontfamily; ?>" class="<?php echo $fontstyle; ?> <?php echo $tstyle; ?> iehandle">
    <div id="hidepage" style="position: absolute; left:5px; top:5px; background-color: #FFFFFF; layer-background-color: #FFFFFF; height: 100%; width: 100%;"> 

<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div> 
    <!--Begin Top Bar-->
        <?php if ($show_date == "true" or $show_textsizer == "true" or $this->countModules('top-left or login or top-right')): ?>
        <div id="top-bar">
            <div class="wrapper">
                <div class="top-bar-padding">
                    <div class="topbar-strip">
                        <?php if ($show_date == "true") : ?>
                        <div class="date-block">
                            <span class="date1"><?php $now = &JFactory::getDate(); echo $now->toFormat('%A'); ?></span>,
                            <span class="date2"><?php $now = &JFactory::getDate(); echo $now->toFormat('%B'); ?></span>
                            <span class="date3"><?php $now = &JFactory::getDate(); echo $now->toFormat('%d'); ?></span>,
                            <span class="date4"><?php $now = &JFactory::getDate(); echo $now->toFormat('%Y'); ?></span>
                        </div>
                        <?php endif; ?>
                        <?php if ($show_textsizer=="true") : ?>
                        <div id="accessibility">
                            <div id="buttons">
                                <a href="<?php echo JROUTE::_($thisurl . "fontstyle=f-larger"); ?>" title="<?php echo JText::_('INC_FONT_SIZE'); ?>" class="large"><span class="button png">&nbsp;</span></a>
                                <a href="<?php echo JROUTE::_($thisurl . "fontstyle=f-smaller"); ?>" title="<?php echo JText::_('DEC_FONT_SIZE'); ?>" class="small"><span class="button png">&nbsp;</span></a>
                            </div>
                            <div class="textsizer-desc"><?php echo JText::_('TEXT_SIZE'); ?></div>
                        </div>
                        <?php endif; ?>
                        <?php if ($this->countModules('login')) : ?>
                            <?php if ($user->guest) : ?>
                            <a href="#" id="lock-button" rel="rokbox[240 210][module=login-module]"><span id="lock-icon" class="login"></span><span><?php echo JText::_('LOGIN'); ?></span></a>
                            <?php else : ?>
                            <a href="#" id="lock-button" rel="rokbox[240 210][module=login-module]"><span id="lock-icon"></span><span><?php echo JText::_('LOGOUT'); ?></span></a>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                    <?php if ($this->countModules('top-left')) : ?>
                    <div class="topbar-left-mod">
                        <jdoc:include type="modules" name="top-left" style="xhtml" />
                    </div>
                    <?php endif; ?>
                    <?php if ($this->countModules('top-right')) : ?>
                    <div class="topbar-right-mod">
                        <jdoc:include type="modules" name="top-right" style="xhtml" />
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
        <!--End Top Bar-->
        <!--Begin Header-->
        <div id="header">
            <div id="header-overlay">
                <div class="wrapper">
                    <?php if ($this->countModules('logo')) : ?>
                    <div class="logo-module"><jdoc:include type="modules" name="logo" style="xhtml" /></div>
                    <?php elseif ($show_logo == "true") : ?>
                    <a href="<?php echo $this->baseurl; ?>" id="logo" class="png"></a>
                    <?php endif; ?>
                    <?php if ($this->countModules('search')) : ?>
                    <jdoc:include type="modules" name="search" style="search" />
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <!--End Header-->
        <div id="page-bg"><div id="page-bg2">
            <div class="wrapper">
                <!--Begin Horizontal Menu-->
                <?php if($mtype != "none") : ?>
                <div id="horiz-menu" class="<?php echo $mtype; ?>"><div id="horiz-menu2"><div id="horiz-menu3">
                <?php if($mtype != "module") : ?>
                    <?php echo $topnav; ?>
                <?php else: ?>
                    <jdoc:include type="modules" name="toolbar" style="none" />
                <?php endif; ?>
                <div class="clr"></div>
                </div></div></div>
                <?php endif; ?>
                <!--End Horizontal Menu-->
                <div id="vertical-sort">
                <?php

                    echo $section_rows->render();

                ?>
                </div>
            </div>
            <!--Begin Bottom Section-->
            <div id="bottom-bg">
                <div class="wrapper">
                    <?php if ($this->countModules('bottom-menu')) : ?>
                    <div id="bottom-menu"><div id="bottom-menu2"><div id="bottom-menu3"><div id="bottom-menu-overlay">
                        <jdoc:include type="modules" name="bottom-menu" style="xhtml" />
                    </div></div></div></div>
                    <?php endif; ?>
                    <?php if ($show_topbutton == "true") : ?>
                    <div id="top-button"><a href="#" id="top-scroll" class="top-button-desc"><?php echo JText::_('TOP'); ?></a></div>
                    <?php endif; ?>
                </div>
            </div>
            <?php if ($show_copyright == "true" or $this->countModules('footer or bottom or bottom2 or bottom3')) : ?>
            <div id="bottom">
                <div class="wrapper">
                    <?php $mClasses = modulesClasses('case7'); if ($this->countModules('bottom or bottom2 or bottom3')) : ?>
                    <div id="bottommodules" class="spacer<?php echo $bottommod_width; ?>">
                        <?php if ($this->countModules('bottom')) : ?>
                        <div class="block <?php echo $mClasses['bottom'][0]; ?>">
                            <jdoc:include type="modules" name="bottom" style="bottom" />
                        </div>
                        <?php endif; ?>
                        <?php if ($this->countModules('bottom2')) : ?>
                        <div class="block <?php echo $mClasses['bottom2'][0]; ?>">
                            <jdoc:include type="modules" name="bottom2" style="bottom" />
                        </div>
                        <?php endif; ?>
                        <?php if ($this->countModules('bottom3')) : ?>
                        <div class="block <?php echo $mClasses['bottom3'][0]; ?>">
                            <jdoc:include type="modules" name="bottom3" style="bottom" />
                        </div>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                    <?php if ($show_copyright == "true") : ?>
                    <div class="copyright-block">
                        <div id="copyright">
                            &copy; <?php echo JText::_('COPYRIGHT'); ?>
                        </div>

                    </div>
                    <?php else: ?>
                    <div class="footer-mod">
                        <jdoc:include type="modules" name="footer" style="xhtml" />
                    </div>
                    <?php endif; ?>
                    <?php if ($show_defaultsettings == "true") : ?>
                    <a href="#" id="clear-cookies"><?php echo JText::_('DEFAULT_SETTINGS'); ?></a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
            <!--End Bottom Section-->
        </div></div>
        <?php if ($this->countModules('debug')) : ?>
        <div id="debug-mod">
            <jdoc:include type="modules" name="debug" style="none" />
        </div>
        <?php endif; ?>
        <?php if ($this->countModules('login')) : ?>
        <div id="login-module">
            <?php if ($user->guest) : ?>
            <jdoc:include type="modules" name="login" style="xhtml" />
            <?php else : ?>
            <div class="logout">
                <jdoc:include type="modules" name="login" style="xhtml" />
            </div>
            <?php endif; ?>
        </div>
        <?php endif; ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2249117-21");
pageTracker._trackPageview();
} catch(err) {}</script>    
</body>
</html>

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:1)

你应该有一个包含以下内容的CSS规则:

html, body { height: 100%; width: 100%; }

你还应该确保你有一个CSS规则来增加预加载器DIV的z-index,以确保它位于页面其余部分的顶部:

#hidepage { z-index: 10000 }