Question

My drop down menu is having some issues with the images not appearing straight away. I have added in a preloader for all the images as I thought that maybe the issue but they still flicker. The drop down menu is under ‘apartments’. My preloader code is a javascript that i am using and have now added that in my code.

  <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 preloader

  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

You need to execute the preloader function in the body onload

Try changing this

<body>

To this

<body onload="javascript:preload">