javascript - Dynamicpage div 在加载新内容后不久闪烁

Question

我正在使用动态页面脚本通过 Ajax 将内容加载到我的页面中。除了 1 期外，一切正常。我有一个页面，其中的 div 彼此堆叠在一起例如: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

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

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

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