Ms dropdown should load instantly and not show select box hard coding before load

Question

Im using MSdropdown and got everything working, cookies and all! However when i load site it takes a few secounds for msdropdown box to load up, and while its loading shows the select option box before it appears fully loaded. Please can you look at my coding and tell me where ive gone wrong? Check my site out to see what i mean withg your own eyes... www.cig-go.com

Thanks

              <select id="webmenu" onchange="document.cookie= 'myDDIdx = ' +    this.selectedIndex + '; path=/;';   window.open(this.options[this.selectedIndex].value,'_top')">
        <option value="select currency" >Change Currency</option>    
             <option value="http://www.cig-go.com/?setCurrencyId=2" title="https://www.cig-go.com/product_images/uploaded_images/Pound.png">Pound</option>
  <option value="http://www.cig-go.com/?setCurrencyId=4" title="http://www.cig-go.com/product_images/uploaded_images/Euro.png">Euro</option>
 <option value="http://www.cig-go.com/?setCurrencyId=3" title="http://www.cig-go.com/product_images/uploaded_images/Dollar.png">Dollar</option>
</select>




 <script type="text/javascript">


    var sidx = document.cookie.indexOf("myDDIdx");
if(sidx != -1)
    window.onload  = function () { document.getElementById("webmenu").selectedIndex =      document.cookie.substr(sidx + 8,1); }

(document).ready(function(e) {
try {
 ("body select").msDropDown();
 } catch(e) {
alert(e.message);
}
});

</script>

ive also got this in html head :

 <script src="http://www.cig-go.com/content/msdropdown/msdropdown/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.cig-go.com/content/msdropdown/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.cig-go.com/content/msdropdown/msdropdown/dd.css" />
<script src="http://www.cig-go.com/content/100/cookies.js" ></script>




       <script> 

    $(document).ready(function () {
    $("select").msDropDown();
});

</script>

any help would be greatly appreaciated im so stumped on this please help. It might only take you a secound :) thanks

Answer 1

Necromancy :D

the $(document).ready(...) is only processed once the whole document is loaded/processed (that's the DOM of the document not external images but including css) - so if you instead put that code as

<select id="webmenu" onchange="document.cookie= 'myDDIdx = ' + this.selectedIndex + '; path=/;';   window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="select currency" >Change Currency</option>    
    <option value="http://www.cig-go.com/?setCurrencyId=2" title="https://www.cig-go.com/product_images/uploaded_images/Pound.png">Pound</option>
    <option value="http://www.cig-go.com/?setCurrencyId=4" title="http://www.cig-go.com/product_images/uploaded_images/Euro.png">Euro</option>
    <option value="http://www.cig-go.com/?setCurrencyId=3" title="http://www.cig-go.com/product_images/uploaded_images/Dollar.png">Dollar</option>
</select>
<script>
    $("select").msDropDown();
</script>

then that will process right away (actual execution time of course depends on the speed of msDropDown() and the client).