how to call an array

Question

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)

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.

so i implemented the following 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<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

</SCRIPT>


<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','');">

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.

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.

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.

in the head:

<script>

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

}

</script>

body onload with page path:

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

styles-code.js...

imgArray = [
'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'otherresourcenames.jpg'];

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

many thanks

Will

Chris Pietschmann · Accepted Answer · 2011-09-10 13:39:50Z

2

Use apply to pass the strings as arguments to the MM_preloadImages function, instead of passing the Array as the only parameter to the function.

var imgArray = [
    '/corporate/background.jpg', 
    '/creative/background.jpg', 
    '/earth/background.jpg', 
    'otherresourcenames.jpg'
];

MM_preloadImages.apply(this, imgArray);

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply

answered Sep 10, 2011 at 13:39

Chris Pietschmann

29.9k36 gold badges124 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to call an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related