加載新內容後不久，Dynamicpage div閃現

Question

我正在使用動態頁面腳本通過Ajax將內容加載到我的頁面中。 除了1個問題，一切正常。 我有一個頁面，其中divs彼此堆疊在一起 因此，例如：header-banner-nav-content-likebox-twitterwidget-footer。

如果我改變頁面，所以如果我從家裏去聯繫例如，然後我看到我的Likebox和twitterwidget在頁面的頂部（在導航下）在不到一秒鐘。之後，所有內容都可正確加載，但在顯示聯繫頁面之前，看到這些框在頂部閃爍，令人討厭。 如何修改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

您的代碼可能所有的風格之前運行已滿載。您可以嘗試使用的​​代替打電話給你的代碼

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

這將導致你的代碼運行窗口完全加載後。