Dynamicpage divs blinkt kurz nach dem Laden neuer Inhalte

Question

Ich verwende das Dynamicpage-Skript, um Inhalt über Ajax in meine Seite zu laden. Alles funktioniert gut neben 1 Problem. Ich habe eine Seite mit den divs untereinander gestapelt So zum Beispiel: header-banner-nav-content-likebox-twitterwidget-footer.

Wenn ich die Seite ändere, also wenn ich zum Beispiel von zu Hause gehe, dann sehe ich meine likebox und twitterwidget in weniger als einer Sekunde zum Anfang der Seite (unter dem Nav). Danach lädt alles richtig, aber es nervt, wenn die Kästchen oben blinken, bevor die Kontaktseite angezeigt wird. Wie kann ich das Skript dynamicpage.js so ändern, dass es die divs unterhalb des Inhalts nicht in den Anfangsstapel verschiebt?

das ist mein Skript:

$(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'); 



}); 

hier ist mein 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

Code könnte, bevor alle Stile waren voll beladen laufen. Sie könnten versuchen, .load() statt mit Ihrem Code

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

Dieser Code, nachdem das Fenster vollständig geladen wurde laufen verursacht rufen.