css菜單 - 下拉菜單出現延遲，我有一個預加載腳本運行所有圖像

Question

我的下拉菜單有一些問題，圖像不直接出現。我在所有圖像的預加載器中添加了我認爲可能存在的問題，但它們仍然閃爍。下拉菜單位於「公寓」下方。我的預加載器代碼是我正在使用的JavaScript，現在已在我的代碼中添加了該代碼。

<style> 

    #container { 
width: 950px; 
margin: 0px auto; 
top: 0px; 
background-color:#000000; 
} 


    #nav { 
width: 950px; 
margin: 0px auto; 
z-index:100; 
    } 

    #nav ul { 
list-style-type: none; 
    } 

    #nav ul li { 
float: left; 
position: relative; 
} 

#nav ul li a { 
padding:0px 0px 0px 0px; 
display:block; 
border-bottom: none; 

} 

    #nav ul li ul { 
display: none 
} 

#nav ul li:hover ul { 
display: block; 
position: absolute; 
text-decoration:none; 
border-bottom: none; 
} 

#nav ul li:hover ul li a { 
display:block; 
padding:0px; 
width: 139px; 
background:#000; 
color:#fff; 
} 

#nav ul li:hover ul li a:hover { 
border-bottom: 1px solid #FFE300; 
} 


#nav li.list1 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 127px; height: 30px; 
} 

#nav li.list2 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 139px; height: 30px; } 

#nav li.list3 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 177px; height: 30px; } 

    #nav li.list4 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 195px; height: 30px; } 

    #nav li.list5 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 128px; height: 30px; } 

    #nav li.list6 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 


#nav a#item1 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 127px; height: 30px; } 

    #nav a#item2 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 139px; height: 30px; } 

    #nav a#item3 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 177px; height: 30px; } 

    #nav a#item4 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 195px; height: 30px; } 

    #nav a#item5 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 128px; height: 30px; } 

    #nav a#item6 { 
background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 


    #nav a#item7 {background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 

    #nav a#item8 {background-image: url(images/main_nav/image.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 




    #nav a#item1:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 127px; height: 30px; text-decoration:none; } 

    #nav a#item2:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 139px; height: 30px; text-decoration:none;} 

    #nav a#item3:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 177px; height: 30px;text-decoration:none; } 

    #nav a#item4:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 195px; height: 30px;text-decoration:none; } 

    #nav a#item5:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 128px; height: 30px; text-decoration:none;} 

    #nav a#item6:hover { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; text-decoration:none;} 

    #nav a#item7:hover {background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 

    #nav a#item8:hover {background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 



    .current1 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 127px; height: 30px;} 

    .current2 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 139px; height: 30px; } 

    .current3 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 177px; height: 30px; } 

    .current4 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 195px; height: 30px; } 

    .current5 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 128px; height: 30px; } 

    .current6 { 
background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 

    .current7 {background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 

    .current8 {background-image: url(images/main_nav/image_over.jpg); background-repeat: no-repeat; border:none; background-position: 0px 0px; width: 134px; height: 30px; } 

    .none {display:none;} 
    </style> 

<body> 
    <div id="container"> 
    <div id="nav"> 
<ul> 
    <li class="current1"><span class="none">STORY</span></li> 
    <li class="list2"><a href="#" id="item2"><span class="none">APARTMENTS</span></a> 
    <ul> 
     <li class="list7"><a href="page.html" id="item7"><span class="none">GALLERY</span></a></li> 
     <li class="list8"><a href="page.php" id="item8"><span class="none">FLOORPLANS</span></a></li> 
     </ul> 
    </li> 
    <li class="list3"><a href="page.html" id="item3"><span class="none">MEET THE LOCALS</span></a></li> 
    <li class="list4"><a href="page.html" id="item4"><span class="none">MEET THE CREATORS</span></a></li> 
    <li class="list5"><a href="page.html" id="item5"><span class="none">LOCATION</span></a></li> 
    <li class="list6"><a href="page.php" id="item6"><span class="none">CONTACT</span></a></li> 
</ul> 
    </div><!--end nav--> 
    </div> 

    </body> 

JavaScript的預加載

var images = new Array() 
    function preload() { 
     for (i = 0; i < preload.arguments.length; i++) { 
      images[i] = new Image() 
      images[i].src = preload.arguments[i] 
     } 
    }  
    preload(
     "images/main_nav/Apartments_over.jpg", 
     "images/main_nav/Apartments.jpg", 
     "images/main_nav/Contact_over.jpg", 
     "images/main_nav/Contact.jpg", 
     "images/main_nav/Floorplans_over.jpg", 
     "images/main_nav/Floorplans.jpg", 
     "images/main_nav/Gallery_over.jpg", 
     "images/main_nav/Gallery.jpg", 
     "images/main_nav/MeetTheCreators_over.jpg", 
     "images/main_nav/MeetTheCreators.jpg", 
     "images/main_nav/MeetTheLocals_over.jpg", 
     "images/main_nav/MeetTheLocals.jpg", 
     "images/main_nav/Story_over.jpg", 
     "images/main_nav/Story.jpg" 

       ) 

Answer 1

您需要在身體的onload執行預加載功能

嘗試改變這種

<body> 

對此

<body onload="javascript:preload"> 

Answer 2

您可以在一個小妖精this tool結合菜單圖像，例如。您只需在生成的CSS中替換規則名稱，並使用更通用的規則設置背景圖像。