加載javascript/css時刪除頁面閃爍

我試圖在</body>後面放入內聯javascript代碼，但它沒有幫助。加載javascript/css時刪除頁面閃爍

HTML代碼：

<html> 
<head> 
     <meta charset="UTF-8"/> 
     <title> Foodstant Delivery </title> 

     <link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" /> 
     <link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" /> 

     <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script> 
     <script type="text/javascript" src="scripts/jquery-ui.min.js"> </script> 
     <script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script> 
     <script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript"> 
     </script> 
</head> 

<body> 
     <div id="container"> 
     <div id="numb1">  
       <img src="images/number4.png" /> 
      </div> 

     <figure id="logo"> 
      <img src="images/logo23.png" alt="Foodstant Delivery logo" /> 
     </figure> 

     <figure id="abtex"> 
      <img src="images/abtext126.png" /> 
     </figure> 
    <div class="Navigation"> 
     <div id="navbar"> 
      <ul> 
       <li class="OP"><a href="testHP.html"><img src="images/house.png" width="40" height="32" /></a> 
       </li> 
       <li class="OP" id="OPM1"><img src="images/order.png" /><a href="Orders.html">Orders</a></li> 
       <li class="OP" id="OPM"><img src="images/menupic3.png" /><a href="Menu.html">Menu</a></li> 
       <li class="OP"> <img src="images/contact.png" /><a href="#">Contact</a> 
         <div class="extended"> 
          <div class="arrow-container"><div class="arrow-up"></div></div> 

          <ul class="smallNav"> 
           <li><a href="#">+65-65553333</a></li> 
           <li><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank">Facebook</a></li> 
           <li><a href="http://twitter.com/yourtwitter" target="_blank">Twitter</a></li> 
           <li><a href="www.gmail.com" target="_blank">enquiry [at] foodstant [dot] com</a></li> 
          </ul> 
         </div> 
        </li> 


       <li class="OP"><img src="images/Pen.png" /><a href="AboutUs2.html">About Us</a></li> 
       <li class="OP"><img src="images/pin.png" /><a href="Jobs.html">Jobs</a></li> 
      </ul> 
     </div> 
    </div> 


     <span id="papersl"> 
      <img src="images/paperslant5.png" /> 
     </span> 

    <div id="mybook"> 
     <div> 
      <img src="images/CC1.png" width="100%" height="100%" /> 
     </div> 
     <div> 
      <img src="images/WC.png" width="100%" height="100%" /> 
     </div> 
     <div> 
      <img src="images/ss1.png" width="100%" height="100%" /> 
     </div> 
     <div> 
      <img src="images/beverages.png" width="100%" height="100%" /> 
     </div> 
    </div> 


     <form action="" id="search-form" class="SF"> 
      <fieldset> 
       <input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" /> 
       <input type="submit" id="search-submit" value="" /> 
      </fieldset> 
     </form> 

     <figure id="foot"> 
      <img src="images/footer-comb1.png" usemap="#green" border="0"> 

      <map name="green"> 

      <area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html"> 
      <area shape="rect" coords="710,44,866,84" href="#0" id="se" > 
      </map> 
     </figure> 

</div> 
</body> 

<script type="text/javascript"> 
      $(document).ready(function() { 

       $('#numb1').hide().delay(800).fadeIn('normal'); 

       $('#se').click(function() { 
        $('.SF').css('visibility','visible'); 

       });  

       $(function() { 
        $('#mybook').booklet({ 
        width:600, 
        height:350 
       }); 
      }); 
      }); 

     </script> 

    </html>

CSS：

* { 
    margin: 0; 
    padding:0; 

} 


body { 
    background-image: url('images/BG-W1.png'); 
    font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif; 
    /*height: 800px !important;*/ 

} 

@font-face { 
    font-family: 'Conv_LITHOSPRO-REGULAR'; 
    src: url('fonts/LITHOSPRO-REGULAR.eot'); 
    src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype'); 
    src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg'); 
} 

#container{ 
    max-width:1000px; 
    margin: 0 auto; 
    position: relative; 
    padding: 0 auto; 
    /*height: 762px !important;*/ 
    /*border: 2px solid blue;*/ 

} 

#logo { 
    float:left; 
    /*border: 1px solid black;*/ 
    height: 180px; 
} 

#abtex { 
    float: left; 
     /*border: 1px solid black;*/ 
     height: 180px; 
} 

#navbar { 

} 

.ftex { 
    position: relative; 


} 

#qqq { 
    position: static !important; 
    border: 1px solid black; 
    background-image:url('images/bg-fs-5.png'); 
    background-repeat:no-repeat; 
    height: 125px; 
    width: 800px; 
    /*padding:25px 0 0 0;*/ 
    /*padding-top: 50px; 
    padding-left: 34px;*/ 
} 

.ftex ul { 
    list-style-type:none; 
    /*border:2px solid yellow;*/ 
    width:1200px; 

} 

.ftex ul li { 
    display:inline; 
    padding-right: 170px; 
    font-family: 'Conv_LITHOSPRO-REGULAR'; 
    font-size: 20px; 
    /*border:2px solid red;*/ 
    color:#ffbf81; 
} 

.ftex li a:link { 
    color: #ffbf81; 
    border-bottom:4px solid #ffbf81; 
    } 

.ftex li a:visited { 
    color: #ffbf81; 
    border-bottom:4px solid #ffbf81; 
    } 

.ftex li a:hover { 
    color: #ffbf81; 
    background:none; 
    border-radius: 0; 
    border-bottom:4px solid #ffbf81; 
    } 

.ftex li a:active { 
    color: #ffbf81; 
    border-bottom:4px solid #ffbf81; 
    } 

.ftex ul li#ss { 
    border-bottom:4px solid #ffbf81; 
    padding-right:5px; 

} 


#footerBg { 
    position: relative; 
    bottom:-90px; 
    left:-50px; 

} 

#foot { 
    padding-top: 10px; 
} 


#foot img { 
    display: block; 
} 

#foothome{ 
    padding-top:100px; 
} 

#foothome img { 
    display: block; 
} 


#numb1 { 
    position: absolute; 
    /*border:10px solid red;*/ 
    top:10px; 

    right:-124px; 
    /*z-index: 100;*/ 
    /*background:url(images/number2.png); */ 
} 

#abt { 
    position: relative; 
    /*border: 1px solid red;*/ 
    height: 400px; 
    left:180px; 
    top:-60px; 

    z-index: -2; 

} 

#papersl { 
    position: absolute; 
    left: 60px; 
    top: 222px; 
    z-index: -4; 
} 

.Navigation { background:background: rgb(246,248,249); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); /* IE6-9 */ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius:10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius:10px; 

    box-shadow: -3px -5px 10px #888888; 
    font-size: 26px; 

    /*position: relative; 
    top:-50px;*/ 
    clear:both; 

    font-family: 'Conv_LITHOSPRO-REGULAR'; 

} 

.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; } 

.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; } 

.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;} 

.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; } 


.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; } 

.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; } 

.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); } 

.Navigation ul li .extended a { font-size:14px;} 

.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } 

.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; } 

.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; } 

.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; } 

.extended ul li {float:left;} 

.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; } 

.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; } 

.Navigation ul li:hover .extended { display: block; } 

.Navigation ul li ul li:hover a { color: white; } 


#navbar ul { 
    list-style-position:inside; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 


#navbar ul li {  
     display: inline; 
     padding:0 20px 0px 0px; 
     margin-bottom: 10px; 
     list-style-type:disc; 
    } 

#navbar ul li.OP { 
     /*list-style-image:url('images/order.png'); */ 
     padding-left: 15px; 

} 

#navbar ul li.OP img { 
    vertical-align: middle; 
} 




#navbar li a:link { 
    color: #EF174A; 
    } 

#navbar li a:visited { 
    color: #BF4100; 
    } 

#navbar li a:hover { 
    color: black; 
    background-color:#D2D2D2; 
    border-radius: 10px; 
    } 

#navbar li a:active { 
    color: #918FBC; 
    } 

li a { 
    text-decoration:none; 
} 

#navbar ul li.OP a { 
    padding-left: 10px; 
} 

.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; } 

.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;} 

.arrow-container { margin-top:-16px; height:16px; } 

fieldset { 
    border: 0 none; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 
#main { 
    border: medium none; 
    /*height: 500px;*/ 
    margin: 50px auto; 
    padding: 15px 0; 
    width: 326px; 
    font-family: 'Conv_LITHOSPRO-REGULAR'; 
} 
.or1 input { 
    background-color: #303030; 
    border: medium none; 
    border-radius: 0.4em 0.4em 0.4em 0.4em; 
    box-shadow: 0 -1px 0 0 #000000; 
    color: #FFFFFF; 

    font-size: 1.2em; 
    height: 27px; 
    letter-spacing: 2px; 
    margin: 15px 0; 
    padding: 0 0 0 10px; 
    width: 316px; 
} 

.ico { 
    float: right; 
} 

button { 
    background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1))); 
    background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0); /* IE6-9 */ 
    border: medium none; 
    border-radius: 0.2em 0.2em 0.2em 0.2em; 

    -webkit-border-radius: .2em; 
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.1); 
    color: #FFFFFF; 
    float: right; 
    height: 24px; 
    text-align: right; 
    width: 79px; 
} 


button:hover { 
    background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent; 
} 

button:active { 
    border: medium none; 
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.2); 
} 

.note1 { 

    padding-top: 40px; 
    padding-left: 20px; 
    font-size: 20px; 
    text-align: center; 
    color: #F74E09; 

} 

#search-form { width: 190px; position: absolute; right: 100px; 
    bottom:55px; 
    visibility: hidden; display: block;} 
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0} 
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;} 
#search-submit img { 
    display: block; 
} 
#search-submit:hover { background-color: #c7bba7;} 

/* CSS3 */ 
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74)); 
    background: -moz-linear-gradient(top, #b2a48c, #9b8d74); 
    text-shadow: rgba(0,0,0,.2) 0 0 5px; 
    display: inline; 
    } 
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block; 
    /* Webkit-transition */ 
    -webkit-transition-property: background-color; 
    -webkit-transition-duration: 0.4s, 0.4s; 
    -webkit-transition-timing-function: linear, ease-in; 
    }

來源

2012-08-15 TheKraven

我們需要更多的信息來了解您的問題，以便我們能夠更好地幫助您:) – Kyle 2012-08-15 08:29:40

您使用的瀏覽器是什麼？屏幕閃爍的方式是什麼？我假設你的網頁實際上包含的不僅僅是'

內容等於

'？乍一看，你似乎有一套'}）;'在你的jQuery的末尾。 – Jeemusu 2012-08-15 08:30:47

對不起，我在想我的CSS很長，所以我沒有發佈它。在這裏。 – TheKraven 2012-08-15 08:52:52

使用CSS來爲身體的可見性設置設置爲JS之前隱藏的加載，然後用JS的onload使用jQuery刪除屬性。 CSS：

body { visibility: hidden;}

的javascript：

$().ready(function(){ $("body").css({visibility:'visible'})});

來源

2012-08-15 08:33:17

因此，這個解決方案不是在加載時閃爍一些元素，而是閃爍整個頁面。 – 2017-02-15 07:27:32

的確如此。在某些情況下，這可能是理想的行爲。如果您知道其他解決方案，請隨時發佈您自己的答案。 – 2017-02-15 11:41:44

如果我理解正確的問題，把這個testCSS.css ...

#numb1 { visibility:hidden; }

或...

#numb1 { display:none; }

無論哪一個更加平庸對你而言。

這樣做會在顯示頁面之前隱藏numb1元素。你在做什麼可以讓頁面在隱藏之前加載，然後淡入，所以可以簡單地看到它。

來源

2012-08-15 08:45:54 Archer

在CSS中做了這些。對不起之前沒有發佈CSS。 – TheKraven 2012-08-15 08:59:51

你不這樣做在上面的CSS。 – Archer 2012-08-15 09:06:17

糟糕，這是我的舊代碼。我試過了，閃爍仍然存在。 – TheKraven 2012-08-15 09:19:04

加載javascript/css時刪除頁面閃爍

回答

相關問題