2015-03-08 105 views
-1

在加載頁面之前,我的網頁變成白色一秒鐘,似乎並不像所有的背景圖像一起加載(或者它們或者它們不在匯)。我做了一些研究發現了一些關於精靈(沒有工作),也改變了圖片從jpg-> png-> gif和回(我甚至穿過幾個)有人可以幫助我解決這個問題。 PS。不要介意一堆「國王」,他們只是佔位符,看看背景如何跨越。 - 謝謝緩慢的網頁速度

CSS:

* { 
     margin:0px; 
     padding:0px; 

     list-style-type:none; 
     } 
     html{ 

     background-image:url("Aba2.jpg"); 
     -webkit-background-size:cover; 
     -moz-background-size:cover; 
     -o-background-size:cover; 
     background-size:cover; 
     text-align:center; 

     } 
     header, section, footer, aside, nav,article{display:block} 

     #Wrapper{ 

     width:1100px; 
     margin:20px auto; 


     } 
     #H_wrap{ 
     padding:10px; 
     height:150px; 
     background-image:url("Abracci1.jpg"); 
     background-repeat:repeat-x; 
     -webkit-background-size:cover; 
     -moz-background-size:cover; 
     -o-background-size:cover; 
     background-size:cover; 

     } 

     #M_head{ 
     padding:10px; 
     font:italic bold 34px/30px "Times New Roman" Times, arial; 
     Text-align:center; 
     color:#000000; 
     text-shadow:2px 2px #999999; 
     text-decoration:underline; 


     } 

     #N_bar { 
     padding:40px; 
     text-align:center; 
     word-spacing:6em; 
     font:italic bold 25px/30px "Times New Roman" Times, arial; 
     text-shadow:3px 3px grey; 


     } 

     a:link.NB{ 
     color:white; 
     } 
     a:visited.NB{ 
     color:black; 
     } 
     a:hover.NB{ 
     color:GOLD; 
     } 
     a:active.NB{ 
     color:#423243; 
     } 


     #N_bar li{ 
     display:inline-block; 
     } 

     #M_section{ 
     background-image:url("Aba3.jpg"); 
     background-position:center; 
     padding:20px; 
     -webkit-background-size:cover; 
     -moz-background-size:cover; 
     -o-background-size:cover; 
     background-size:cover; 
     } 
END CSS.  
HTML: 
     <!Doctype html> 
    <html lang="eng"> 
    <head> 
    <meta charset="uft-8"/> 
    <link rel="stylesheet" href="Abracci_main.css"/> 
    </head> 
    <html> 
    <body> 
     <div id="Wrapper"> 
     <div id="H_wrap"> 

      <header id="M_head"> 
      <h1>Abracci</h1> 
      </header> 


      <nav id="N_bar"> 
       <ul> 

        <li><a class="NB" href="https://css-tricks.com/perfect-full-page-background-image/">Men</a></li> 
        <li><a class="NB" href="#">Women</a></li> 
        <li><a class="NB" href="#">Children</a></li> 
        <li><a class="NB" href="#">Apparel</a></li> 
       </ul> 
      </nav> 
      </div> 
      <section id="M_section"> 
        <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> 

      </section> 
      <aside id="M_aside"> 

      </aside> 
      <footer id="M_footer"> 

      </footer> 

      </div> 



    </body> 
    </html> 

     } 
END HTML. 
+0

您可以提供一個示例使用?什麼圖像沒有加載,文件名是否正確?沒有足夠的信息給我們知道問題可能是什麼 – 2015-03-08 21:26:47

+0

哦,對不起,我的網頁離線,所以我不能測試速度或「驗證」它,但我很肯定,它非常緩慢,因爲當我刷新或切換鏈接屏幕變爲空白,然後出現的話就會出現背景。我想知道是否有辦法阻止這種情況發生。 – 2015-03-09 00:36:31

回答

0

使用validator,和瀏覽器開發者工具中鉻,Firefox或Internet Explorer。淨選項卡會告訴你到底發生了什麼。 請修復您的問題的格式(缺少html標籤,額外的}等