1

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 load 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 page.

would someone be able to point or show me how to, in principle:

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



styles-code.js?? page:

'/corporate/heading.png',
'/creative/heading.png',
'/earth/heading.png',
'/sea/heading.png',
'/classical/heading.png',

'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'/sea/background.jpg',
'/classical/background.jpg',

etc

and have 1 page of this code called in by all pages in an easy to see and edit list?

would really appreciate guidance with this,

0

1 Answer 1

1

You cannot exactly pass the page name to method to load items from the page. However you can do this way.

<body onLoad="LoadStyles('/styles-code.js');">
<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>

Your style-code.js will contain data as following:

imgArray = [
'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
....
'otherresourcenames.jpg'];
3
  • thanks for looking into it although I have tried the above but not found success with it. It could be something very simple, because I dont know JavaScript. I literally copy pasted the code exactly, perhaps part of it requires customising which to others would be common sense? but with it not working, I dont know how to start to understand why. Please advise? If it's possible to see why its not working, the page I'm attempting this on is: delightwebdesign.co.uk with JavaScript page on: delightwebdesign.co.uk/js/styles-code.js I appreciate your looking into it. Sep 9, 2011 at 9:48
  • Its possible to see that its not working by (with cleared browser cache) changing the styles (top left of page), when not working the graphics download in when changed, when working, the graphics switch instantly having already been preloaded. Sep 9, 2011 at 9:50
  • fixed up: var imgArray = [ '/corporate/background.jpg', '/creative/background.jpg', '/earth/background.jpg', 'otherresourcenames.jpg' ]; MM_preloadImages.apply(this, imgArray); developer.mozilla.org/en/JavaScript/Reference/Global_Objects/… Sep 10, 2011 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.