how to call an array
<p>I have a website of quite a few pages which also has a style sheet switcher so the user can select their own customised graphics and layout (css file)</p>

<p>these css files download in the graphics but only when the call is clicked... even if the page has already been opened for seconds or minutes when the graphics could have been loaded in for an instant switch.</p>

<p>so i implemented the following code:</p>

<pre><code>function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i&lt;a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

&lt;/SCRIPT&gt;


&lt;body onLoad="MM_preloadImages('/corporate/heading.png','/creative/heading.png','/earth/heading.png','/under-the-sea/heading.png','/space-and-stars/heading.png','/classical/heading.png','/corporate/document.jpg','/space-and-stars/document.png','/creative/document.jpg','/earth/background.jpg','/under-the-sea/background.jpg','/classical/document.png','/classical/background.jpg','/under-the-sea/document.png','/corporate/home-graphics.png','/earth/content.jpg','/earth/footer.jpg','/earth/home-graphics.png','/under-the-sea/home-graphics.png','/creative/home-graphics.png','/space-and-stars/background.jpg','');"&gt;
</code></pre>

<p>it works fantastically - you open the page and as long as it takes to notice where you can click the styles is the same amount of time it takes to have the styles cached for the styles switch immediately and effortlessly.</p>

<p>however, the site has grown and is now quite a number of pages with the above in each html file. ive just added a "creative 2" style, which has caused the above to need updating........ the maintenance of this code is inefficient to edit each and every page.</p>

<p>So I have been seeking out how to call an array from an external page, but have not got the following to work and I do not know sufficient JavaScript to diagnose why.</p>

<p>in the head:</p>

<pre><code>&lt;script&gt;

LoadStyles = function(pageName){
   var head= document.getElementsByTagName('head')[0]; // get head element
   var script= document.createElement('script'); // create new script element
   script.type= 'text/javascript'; // set type
   script.onreadystatechange= function () { 
      if (this.readyState == 'complete') 
           MM_preloadImages(imgArray) ; // call when script is loaded
   }

   script.src= pageName; // set script source path
   head.appendChild(script); // append to body

}

&lt;/script&gt;
</code></pre>

<p>body onload with page path:</p>

<pre><code>&lt;body onLoad="LoadStyles('/js/styles-code.js');"&gt;
</code></pre>

<p>styles-code.js...</p>

<pre><code>imgArray = [
'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'otherresourcenames.jpg'];
</code></pre>

<p>Pls could someone with more experience and knowledge than I point out does anything look out of place here?</p>

<p>many thanks</p>

<p>Will</p>
