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

Posted 2023-04-13

【中文标题】加载新内容后不久，动态页面 div 会闪烁

【英文标题】：Dynamicpage divs flash shortly after loading new content

【发布时间】：2012-08-24 14:42:58

【问题描述】：

我正在使用动态页面脚本通过 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 lifloat:left; position: relative; padding-right:15px;  display:inline;
footer ul li acolor: #d5d5d5;
footer ul li a:hovercolor: #777;
#footer-container p  position: absolute; bottom:30px;

#youtube-music     
    clear: none;
    float: left;
    width: 100%;
    display: block;
    

【问题讨论】：

看起来这是您的 css 定位或脚本正在注入的问题，这需要一个工作演示来检查或修复一个超级英雄

【参考方案1】：

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

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

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