动态页面div在加载新内容后不久就会闪烁

Question

我正在使用dynamicpage脚本通过Ajax将内容加载到我的页面中。除了1期外，一切都很好。我有一页潜水器叠在一起例如：标题横幅导航内容likebox推特小部件页脚。

如果我更改了页面，例如，如果我从家里去联系，那么我会在不到一秒钟的时间内看到我的赞框和推特小部件进入页面顶部（导航下方）。之后，所有内容都加载正确，但在显示联系人页面之前，看到框在顶部闪烁是很烦人的。如何修改dynamicpage.js脚本，使其不会很快将内容下面的div从顶部移动到顶部？

这是我的脚本：

$(function() {
    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page=wrap"),
        baseHeight   = 0,
        $el;
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $(window).bind('hashchange', function(){ 
String.prototype.toTitleCase = function(n) {
   var s = this;
   if (1 !== n) s = s.toLowerCase();
   return s.replace(/b[a-z]/g,function(f){return f.toUpperCase()});
   }
   newHash = window.location.hash.substring(1);         
   function changeTitle(title) { 
   document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
   changeTitle("");
        newHash = window.location.hash.substring(1);
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
    });
    $(window).trigger('hashchange');

});

这是我的css：

.header-wrapper {
    display:block;
    clear: none;
    max-width:960px;
    margin:auto;
}
header {
    position:relative;
    display: block;
    width: 100%;
    max-width:960px;
    min-height: 110px;
    background: url('../img/header-d.gif') no-repeat;
    margin:0 auto;
    margin-top:15px;
}
.like-button {
    position:absolute;
    right: 36%;
    bottom:0;
}
.like-button-twitter {
    position:absolute;
    right:22%;
    bottom:2px;
}
#email {
     width: 180px; 
     background: #FFFFFF; 
     border: 1px solid #BBBBBB;
     position:absolute;
     right:2px;
     bottom:5px;
     margin: 0 5px 0 0;
     padding: 4px;  
     font-size: 10px;
     }  
.go {
    position: absolute;
    right:8px;
    bottom:10px;
    border:none;
    color: #455868;
    font-weight:bold;
}
#icons {
    background: url('../img/icons.png') no-repeat;
    position: absolute;
    list-style:none;
    width:210px;
    height:35px;
    right:0;
    }
#icons li {
    position:absolute;
    list-style:none;
    }
li icon1 {
    position:absolute;
    right:100px;
    width:35px;
}
nav {
    min-height: 40px;
    width: 100%; 
    background: #374652 ; /*#455868 */
    font-size: 10pt;
    font-family: sans-serif;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 400px;
    height: 20px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    color:#ffffff;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    color:#ffffff;
}
nav a:visited
{   color:#ffffff; }
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #2d3a44;
}
nav a#pull {
    display: none;
}
#banner {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display:block;  
    }
.wrapper {
    width: 100%;
    max-width: 960px;
    margin: auto;
}
article {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top:30px;
    width: 62%;
    display: block;
}
#youtube-music .container {height:450px;}
section {
    padding-left:8px;
}
aside {
    clear: none;
    float: right;
    margin-left: 3%;
    padding-right:1%;
    margin-top:30px;
    width: 33.2033%;
    display: block;
}
#like-box {
    clear: none;
    float: left;
    width: 100%;
    display: block;
    overflow:hidden;
    border:1px solid #2c2c2c;
}
.fb-like-box  {
    width: 100% !important;
    border:none; 
    overflow:hidden;
}
#youtube-box {
    clear: none;
    float: left;
    width: 100%;
    margin-top:10px;
    display: block;
    border:1px solid #2c2c2c;
}
#twitter-box {
    clear: none;
    float: left;
    width: 100%;
    margin-top:10px;
    display: block;
    overflow:hidden;
    border:1px solid #2c2c2c;
}
#twitter {
width:100%;
}
#twitter_m {
width: 100%;
padding: 0 13px;
}
#twitter_container {
min-height:45px;
height:auto !important;
}
#twitter_update_list {
width: 100%;
padding: 0;
overflow: hidden;
font-size: 14px;
color: #374652;
line-height: 16px;
margin-left:-13px;
}
#twitter_update_list li {
width: 90%;
padding:10px;
border-bottom: solid 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
footer { margin-top: 15px; display:block; background:#374652; color: #d5d5d5;}
#footer-container {position: relative; height: 250px; max-width:960px; margin:auto;}
footer ul { padding-top: 5px; padding-left:15px;}
footer ul li{float:left; position: relative; padding-right:15px;  display:inline;}
footer ul li a{color: #d5d5d5;}
footer ul li a:hover{color: #777;}
#footer-container p { position: absolute; bottom:30px;}
#youtube-music {    
    clear: none;
    float: left;
    width: 100%;
    display: block;
    }

Answer 1

您的代码可能在所有样式完全加载之前就已经运行了。您可以尝试使用.load()而不是$(function(){...})来调用您的代码

    $(window).load(function () {
      // run code
    });

这将导致您的代码在窗口完全加载后运行。